成功登录后显示用户信息从REDX存储

我有一些问题显示在我的反应组件中更新的REDX状态。基本上，我试图做的是显示用户成功登录信息，这是通过登录操作发送给Redux商店的。成功登录后显示用户信息从REDX存储

下面是我的登录操作：

export function login(userDetails) { 
return dispatch => 
axios.post(`${API_URL}/signin`, userDetails).then((res) => { 
    const token = res.data.Token; 
    localStorage.setItem('token', token); 
    setAuthorizationToken(token); 
    const decoded = jwt.decode(res.data.Token); 
    dispatch({ 
    type: SET_CURRENT_USER, 
    user: decoded.currentUser 
    }); 
    }); 
}

的成功登录的用户重定向到仪表板组件：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import HeaderSideBar from '../includes/header-side-bar'; 

class Dashboard extends Component{ 

render(){ 

    const {username} = this.props.user; 

    return (
     <HeaderSideBar username={username}/> 
    ) 
} 
} 

function mapStateToProps(state) { 
return { 
    user: state.user 
    } 
} 
export default connect(mapStateToProps)(Dashboard)

我减速机：

import { AUTH_USER, 
    UNAUTH_USER, 
    AUTH_ERROR, 
    USER_EXIST, 
SET_CURRENT_USER 
} from '../actions/types'; 

const INITIAL_STATE = { userExist: '', error: '', message: '', user: '', 
content: '', authenticated: false }; 

function authReducer(state = INITIAL_STATE, action) { 
    switch (action.type) { 
case AUTH_USER: 
    return { ...state, error: '', message: 'Successfully registered', 
authenticated: true }; 
case UNAUTH_USER: 
    return { ...state, authenticated: false }; 
case AUTH_ERROR: 
    return { ...state, error: action.payload }; 
case USER_EXIST: 
    return { ...state, error: action.error }; 
case SET_CURRENT_USER: 
    console.log(action.user); 
    return { ...state, user: action.user }; 
default: 
    return state; 
    } 
} 

export default authReducer;

我想在用户das中显示来自更新状态的值hboard。 e.g用户名，全名

来源

2017-08-30 dealwap

，什么是你所面对 –

什么是您的减速样子的问题？ –

@MaxMillington我已添加减速器。 – dealwap

尝试直接使用的道具在你的仪表板组件一样，

render(){ return ( <HeaderSideBar username={this.props.user}/> ) }

来源

2017-08-30 19:50:18

成功登录后显示用户信息从REDX存储

回答

相关问题