2017-10-09 85 views
0

我第一次使用Redux,并且我没有成功更新状态。这里是工作流程:用户登录应用程序(/login),令牌存储在sessionStorage中,并且我调度用户信息以访问/dashboard/:id页面中的userData。React redux - 用新值更新对象状态

现在,当我CONSOLE.LOG在仪表板组件的道具,这里是结果:

userData : {} 

所以对象用户数据仍然是空的。 下面是代码:

LoginForm的:

import React, { Component } from 'react'; 
import { Link } from 'react-router-dom'; 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 
import * as authActions from '../../actions/authActions'; 


class LoginForm extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      email: '', 
      password: '', 
      errors: {}, 
      isLoading: false, 
     }; 
    } 

    onChange(e) { 
     this.setState({ 
      [e.target.name]: e.target.value 
     }) 
    } 

    onSubmit(e) { 
     e.preventDefault(); 
     this.setState({ errors: {}, isLoading: true }); 
     this.props.actions.logInUser({ data: { user: { email: this.state.email, password: this.state.password }}}) 
    } 

    render() { 
     return(
      <div> 
       <form onSubmit={this.onSubmit.bind(this)}> 
        <div className="field"> 
         <label className="label"> Email </label> 
         <div className="control"> 
          <input type="email" 
            name="email" 
            value={this.state.email} 
            onChange={this.onChange.bind(this)} 
            className="input" /> 
         </div> 
        </div> 
        <div className="field"> 
         <label className="label"> Mot de passe </label> 
         <div className="control"> 
         <input type="password" 
           ref="password" 
           name="password" 
           value={this.state.password} 
           onChange={this.onChange.bind(this)} 
           className="input" /> 
         </div> 
        </div> 
        <div className="form-group"> 
         <input type="submit" value="Signup" className="button is-primary" /> 
        </div> 
        <Link to={{ pathname: '/register' }}>Inscription</Link> 
       </form> 
      </div> 
     ); 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators(authActions, dispatch) 
    }; 
} 

export default connect(null, mapDispatchToProps)(LoginForm); 

的authAction:

import { browserHistory } from 'react-router'; 
import * as types from './types'; 
import sessionApi from '../api/SessionApi'; 

export function loginSuccess(userData) { 
    return { 
     type: types.LOG_IN_SUCCESS, 
     payload: userData 
    } 
} 

export function loginFailed() { 
    return { 
     type: types.LOG_IN_FAILED 
    } 
} 

export function logInUser(credentials) { 
    return function(dispatch) { 
     return sessionApi.login(credentials) 
      .then(response => { 
       console.log(response); 
       if(response.data) { 
        sessionStorage.setItem('jwt', response.data.authentication_token); 
        dispatch(loginSuccess(response.data)); 
        browserHistory.push('/dashboard/' + response.data.id); 
       } else { 
        dispatch(loginFailed()); 
       } 
      }) 
      .catch(error => { 
       throw(error); 
      }) 
    } 
} 

的API:

import axios from 'axios'; 

class SessionApi { 
    static login(credentials) { 
     return axios.post('<link_hidden>', credentials) 
     .then(response => { 
      console.log(response); 
      return response; 
     }) 
     .catch(error => { 
      return error; 
     });    
    } 
} 

export default SessionApi; 

会议减速器(我有combineReducer一个rootReducer) :

import * as types from '../actions/types'; 
import initialState from './initialState'; 

export default function sessionReducer(state = initialState, action) { 
    switch(action.type) { 
     case types.LOG_IN_SUCCESS: 
     console.log(action); 
      return { 
       ...state, 
       userData: action.payload 
      } 
     case types.LOG_IN_FAILED: 
      console.log('login failed'); 
      break; 
     default: 
      return state; 
    } 
} 

和初始化状态文件:

export default { 
    session: !!sessionStorage.jwt, 
    userData: {} 
} 

是否有人知道为什么用户数据对象仍然是空的?在会议减速器我通过了用户数据,所以我不明白..

编辑

dashboard.js 

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

class Dashboard extends Component { 
    constructor(props) { 
     super(props); 
     console.log(props); 
    } 

    render() { 
     return(
      <div> 
       <h1> Hello user </h1> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    const userData = state.sessionReducer.userData; 
    return { userData }; 
} 

export default connect(mapStateToProps)(Dashboard); 
+0

你在哪里遇到空的'userData'?当你在减速器或axios呼叫中注销时它是否为空? – MagicDragon

+0

当我登录仪表板组件时,userios是空的,在axios调用它不是空的,它包含我需要的所有数据 –

+0

您能否包含仪表板的代码?你使用mapStateToProps吗? – MagicDragon

回答

0

你的代码似乎没什么问题。你能检查你的路由器是否工作正常吗?

+0

这是路由器!感谢您的帮助 ! –

相关问题