javascript - 在 react-redux 中访问状态时出错

Question

我正在尝试根据用户的角色将用户路由到特定的路由。我使用 redux 作为状态管理工具。我正在尝试从auth状态访问用户对象以路由用户。

当我登录到下面的系统时，是用户进行路由的逻辑步骤。

1. 登录系统
2. 验证并加载用户
3. 根据角色将用户重定向到路由

我正在尝试访问导致错误的user.rolein组件。DashBoard

请帮助我理解错误。

1.登录系统的动作

export const login = (email, password) => async dispatch => {
    const config ={
        headers:{
            'Content-Type': 'application/json'
        }
    };
    const body = JSON.stringify({email, password});

    try {
        const res = await axios.post('/api/v1/midasUsers/login',body,config);

        dispatch({
            type:LOGIN_SUCCESS,
            payload:res.data
        });

        dispatch(loadUser());

    } catch (err) {
        console.log(err)
        const errors = err.response.data.errors;
        if(errors){
            errors.forEach(error =>dispatch(setAlert(error.msg,'danger')));
        }

        dispatch({
            type:LOGIN_FAIL
        })
    }

}

2.loaduser到localstorage进行认证：

export const loadUser = () => async dispatch => {

    console.log("I am inside loaduser");

    if(localStorage.token){
        setAuthToken(localStorage.token)
    }

    try {
        const res = await axios.get('/api/v1/midasUsers/auth');
        dispatch({
            type: USER_LOADED,
            payload:res.data
        })
    } catch (err) {
        dispatch({
            type: AUTH_ERROR
        })
    }
}

3. DashBord.js - 路由用户的组件

import React,{useEffect} from 'react';
import {Redirect} from 'react-router-dom';
import { connect} from 'react-redux';
import PropTypes from 'prop-types';
//import store from '../../store';
//import {loadUser} from '../../action/auth';

const Dashboard = ({auth:{user,loading,isAuthenticated}}) => {        
    if(user.role === 'admin'){
        return <Redirect to='/adminLandingPage'/>
    }
}

Dashboard.propTypes = {
    auth:PropTypes.object.isRequired
}

const mapStateToProps = state => ({
    auth : state.auth
})

export default connect(mapStateToProps,{})(Dashboard);

loadUser每次调用此路由后，我App.js都会调用相同的功能LOGIN_SUCCESS

GET /%3Canonymous%3E

请帮助我理解问题

auth.reducer
import {REGISTER_SUCCESS, 
        REGISTER_FAIL, 
        USER_LOADED,
        AUTH_ERROR,
        LOGIN_SUCCESS,
        LOGIN_FAIL,
        LOGOUT} from '../action/types';


const initialState = {
    token : localStorage.getItem('token'),
    isAuthenticated : null,
    loading: true,
    user:null
}

export default function(state= initialState, action){
    const {type, payload} = action;
    switch (type) {
        case USER_LOADED:
            return{
                ...state,
                isAuthenticated:true,
                loading: false,
                user:payload
            }
        case REGISTER_SUCCESS:
        case LOGIN_SUCCESS:    
            localStorage.setItem('token', payload.token);
            return{
                ...state,
                ...payload,
                isAuthenticated:true,
                loading:false,
            }
        case REGISTER_FAIL:
        case AUTH_ERROR:
        case LOGIN_FAIL:
        case LOGOUT:            
            localStorage.removeItem('token');
            return{
                ...state,
                token:null,
                isAuthenticated:false,
                loading:false
            }
        default:
            return state;
    }
}

store.js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

index.js in reducers folder
import { combineReducers } from 'redux';
import alert from './alert';
import auth from './auth';

export default combineReducers ({
alert,
auth
});

import React, { Fragment, useState } from 'react';
import { Link, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { login } from '../../action/auth';


const Login = ({ login, isAuthenticated, user }) => {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });

  const { email, password } = formData;

  const onChange = e =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

  const onSubmit = async e => {
    e.preventDefault();
    login(email, password);
  };

  //Redirect if logged in
  if(isAuthenticated){
      //console.log(user.role);            
      return <Redirect to ="/dashboard"/>
  }

  return (
    <Fragment>
      <h1 className='large text-primary'>Sign In</h1>
      <p className='lead'>
        <i className='fas fa-user' /> Sign Into Your Account
      </p>
      <form className='form' onSubmit={e => onSubmit(e)}>
        <div className='form-group'>
          <input
            type='email'
            placeholder='Email Address'
            name='email'
            value={email}
            onChange={e => onChange(e)}
          />
        </div>
        <div className='form-group'>
          <input
            type='password'
            placeholder='Password'
            name='password'
            value={password}
            onChange={e => onChange(e)}
            minLength='6'
          />
        </div>
        <input type='submit' className='btn btn-primary' value='Login' />
      </form>
      <p className='my-1'>
        Don't have an account? <Link to='/register'>Sign Up</Link>
      </p>
    </Fragment>
  );
};

Login.propTypes = {
  login: PropTypes.func.isRequired,
  isAuthenticated:PropTypes.bool
};

const mapStateToProps = state =>({
    isAuthenticated : state.auth.isAuthenticated,
    user:state.auth.user
})

export default connect(mapStateToProps,
  { login }
)(Login);

我有这个登录组件，它将用户重定向到 dashbaord 并且在 dashbaord 我无法从状态访问 user.role

标签： javascriptreactjsreact-redux