React-Redux用户状态未获得更新

时间:2017-04-12 15:43:18

标签: reactjs react-redux

我有一个从我的行动中获得正确对象的状态,但它实际上似乎并没有附加到州。有没有人有任何使用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)

在这里,你可以看到第一次打印出来的错误,然后打印出来。您甚至可以看到该操作,但我无法单击该操作的箭头,而其他的则不会显示更新的状态,因为我的预期是

enter image description here

1 个答案:

答案 0 :(得分:0)

感谢大家的帮助

问题最终出现在我的路由器页面上的双重验证中。我需要重新引入action变量才能正常启动。这是

的代码
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