代码之家  ›  专栏  ›  技术社区  ›  eddbreuer

React Redux Reducer已触发但未更改状态

  •  1
  • eddbreuer  · 技术社区  · 7 年前

    我正在尝试使用已验证的:true和用户数据设置应用程序状态。 Reducer被触发(我可以看到console.log),但它正在返回初始状态(isAuthenticated:false,user:{})

    据我所知,Thunk工作正常

    我在组件中获得的道具是{isAuthenticated:false,用户{}}

    我以前也做过类似的事情,所以我不知道为什么会这样

    import { AUTHENTICATED } from '../actions/types'
    
    const initialState = {
        isAuthenticated: false,
        user: {}
    }
    
    export default function(state = initialState, action) {
        switch (action.type) {
            case AUTHENTICATED:
                console.log(action.payload)
                return {
                    ...state,
                    isAuthenticated: true,
                    user: action.payload.user
                }
    
            default:
                return state
        }
    }
    

    操作创建者用户。js公司

    import axios from 'axios';
    import history from '../history';
    import config from '../config'
    import { AUTHENTICATED } from './types';
    
    export function authUser(token){
       return function(dispatch){
          const data = {"token": token}
          axios.post(`${config.api_url}/authuser`, data)
             .then((res) => {
                dispatch({type: AUTHENTICATED, payload: res.data})
             })
             .catch((err) => console.log(err))
       }
    }
    

    组件仪表板。js公司

    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import history from '../history';
    import * as actions from '../actions/memberActions';
    
       class Dashboard extends Component {
    
          componentWillMount(){
                const token = window.localStorage.getItem('token');
                   if(!token){
                      history.push('/')
                   }else{
                      this.props.authUser(token);
                      console.log(this.props.user);
             }
    
          };
          render() {
             return (
                <div>
                   <h2>This will be a dashboard page</h2>
                   <p>There should be something here:{ this.props.authenticated }</p>
                   <h1>OK</h1>
    
                </div>
             )
          }
       }
    
    function mapStateToProps(state){
       return {
          user: state.user
       }
    
    }
    
    export default connect(mapStateToProps, actions)(Dashboard);
    
    3 回复  |  直到 7 年前
        1
  •  2
  •   kaveh    7 年前

    你在检查 props.user 在里面 componentWillMount ,它不会显示您的更新。 相反,请检查 render 方法,或在另一个生命周期处理程序方法中,如 componentWillReceiveProps .

        2
  •  1
  •   Alex    7 年前

    您的代码应该是这样的

    export default function(state = initialState, action) {
        switch (action.type) {
            case AUTHENTICATED:
                console.log(action.payload)
                return state =  {
                    ...state,
                    isAuthenticated: true,
                    user: action.payload.user
                }
    
            default:
                return state
        }
    }
    
        3
  •  0
  •   Christopher Francisco    7 年前

    从表面上看 res.data 对象,在 dispatch({type: AUTHENTICATED, payload: res.data}) 没有 user 所有物

    所以当你这样做的时候 user: action.payload.user 你基本上是说 user: undefined .

    请发布您的 console.log(res.data) 看看这是否是问题所在。