2017-04-12 40 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