2017-04-12 44 views
-1

我有一個狀態是從我的操作中獲得正確的對象,但它似乎不會實際追加到狀態。有沒有人有任何與React-Redux中的reducer合作的經驗可以借鑑?我不確定爲什麼我不能返回新的狀態。React-Redux用戶狀態沒有得到更新

這裏是我目前正在進行的代碼。

import * as types from '../constants' 
const defaultState = {} 
const userReducer = (state = defaultState, action) =>{ 
    switch(action.type){ 
     case types.USER_LOGGED_IN: 
      console.log("in the logged in reducer") 
      console.log(action.cookie) 
      return { 
       ...state, 
       cookie: action.cookie 
      } 
     case types.USER_LOGGED_OUT: 
      return state 
     default: 
      return state   
    } 

} 

export default userReducer 

console.log實際上會爲我打印出正確的cookie值。任何想法或幫助將不勝感激。

每這裏請求是容器,

import React, { Component, PropTypes } from 'react' 
import { routerActions } from 'react-router-redux' 
import { connect } from 'react-redux' 
import GoogleLogin from '../components/GoogleLogin' 
import actions from '../actions/' 
import cookie from 'react-cookie' 
const login = actions.userActions.login 

function select(state, ownProps) { 
    const isAuthenticated = state.user.cookie || false 
    console.log(isAuthenticated) 
    const redirect = ownProps.location.query.redirect || '/' 
    return { 
    isAuthenticated, 
    redirect 
    } 
} 

class LoginContainer extends Component { 



    componentWillMount() { 
     const { isAuthenticated, replace, redirect } = this.props  
     if (isAuthenticated) { 
     replace(redirect) 
     } 

    } 

    componentWillReceiveProps(nextProps) { 
     const { isAuthenticated, replace, redirect } = nextProps 
     const { isAuthenticated: wasAuthenticated } = this.props 

     if (!wasAuthenticated && isAuthenticated) { 
     replace(redirect) 
     } 
    } 

    onClick(e){ 
     e.preventDefault() 
     //console.log("in the onClick") 
     var status = cookie.load("MarketingStatsApp",false) 
     if(!(status == undefined)){ 
     const login = actions.userActions.login 
     this.props.login({ 
     cookie: status 

     }) 
     } 

     window.location.href='auth/google' 

    }; 

    render() { 
     return (
     <div> 
      <h1>Login using Google</h1> 
      <GoogleLogin onClick={this.onClick.bind(this)}/> 
     </div> 
    ) 
    } 

} 

export default connect(select, { login, replace: routerActions.replace })(LoginContainer) 

在這裏你可以看到假打通打印出來的第一次,然後該cookie獲得打印出來。你甚至可以看到行動,但我不能點擊進入箭頭的那個動作,我怎麼指望它

enter image description here

+1

這看起來很適合我。你如何看待這個問題?我懷疑這個問題是你在使用狀態的地方,而不是在減速器中。 –

+0

是的你的減速機是好的,請提供你的容器的代碼 –

+0

感謝您的幫助,我添加了容器的職位 – Peter3

回答

0

感謝您的幫助其他的人不顯示更新的狀態大家

問題最終在我的路由器頁面上的雙重驗證。我需要重新引入操作變量才能正常啓動。這裏是代碼

import { Router, Route, browserHistory,IndexRedirect } from 'react-router' 
import React from 'react'; 
import Layout from './components/Layout' 
import Home from './containers/Home' 
import Login from './containers/LoginContainer' 
import Dashboard from './containers/Dashboard' 

import { UserIsAuthenticated} from './util/wrapper' 
import cookie from 'react-cookie' 
import axios from 'axios' 
import actions from './actions' 
import store from './reducers'; 
const Authenticated = UserIsAuthenticated((props) => props.children) 


function doubleCheckGUID(guid){ 

    return axios.post("/auth/guid",{guid: guid}).then(response => { 

    const login = actions.userActions.login 
    store.dispatch(login({ 
      cookie: cookie.load("MarketingStatsApp",false) 
     })) 

    return true; 
    }).catch(error => { 
    return false; 
    }) 

} 
if(cookie.load("MarketingStatsApp",false)){ 
    doubleCheckGUID(cookie.load("MarketingStatsApp",false)) 
} 


const AppRouter =() => 
    <Router history={browserHistory} > 
    <Route path="/" component={Layout}> 
     <IndexRedirect to="/home" /> 
     <Route path="home" component={Home} /> 
     <Route path="login" component={Login}/> 
     <Route component={Authenticated} > 
      <Route path="dash" component={Dashboard} /> 
     </Route> 
    </Route> 
    </Router> 

export default AppRouter