React Redux Reducer 触发但不改变状态

Posted 2023-04-14

【中文标题】React Redux Reducer 触发但不改变状态

【英文标题】：React Redux Reducer triggered but not changing state

【发布时间】：2018-08-09 21:51:01

【问题描述】：

我正在尝试使用已验证：真实和用户数据设置应用程序状态。 减速器被触发（我可以看到console.log）但它正在返回初始状态（isAuthenticated：false，用户：）

据我所知，Thunk 工作正常

我在组件中获得的道具是 isAuthenticated: false, user

我以前做过类似的事情，所以我不知道为什么会发生这种情况

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
    

动作创建者 user.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))
   

组件dashboard.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);

【问题讨论】：

要格式化代码，每一行 必须以 4 个额外空格开头。您可以通过突出显示代码块并按 Ctrl-K 轻松完成此操作。

话虽如此，请edit您的问题显示minimal reproducible example。

请显示您获得该值的代码。

请在dispatch(type: AUTHENTICATED, payload: res.data)这一行之前写一个console.log。可能是数据变为空白。

Action Creator 中没有 console.log 可以很好地返回来自 API 的数据。没问题

【参考方案1】：

您正在检查componentWillMount 中的props.user，它不会显示您的更新。 而是在您的 render 方法或其他生命周期处理程序方法（如 componentWillReceiveProps）中检查状态更改。

【参考方案2】：

你的代码应该是这样的

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
    

【讨论】：

我看不出与 OP 发布的内容有什么不同，您能详细说明一下吗？

return state = ...state, isAuthenticated: true, user: action.payload.user 克隆状态后，您必须将该值设置为状态

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 = ...state, isAuthenticated: true, user: action.payload.user default: return state; 仍处于初始状态

【参考方案3】：

从外观上看，您的res.data 对象似乎在dispatch(type: AUTHENTICATED, payload: res.data) 中没有user 属性。

所以当你使用user: action.payload.user 时，你基本上是在说user: undefined。

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

用户：...，令牌： “eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI1Y ... xNzl9.gVpbeGhovcuBtzuxMhDA_xrO8upw6-s5pmH9gVMPJ7U”的令牌： “eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI1YTk3MDczMDE2OTQ0ZDRhYmM0ZDk0ZDAiLCJpYXQiOjE1MTk5MzA3MTYxNzl9.gVpbeGhovcuBtzuxMhDA_xrO8upw6-s5pmH9gVMPJ7U” 用户：_id： “5a97073016944d4abc4d94d0”，电子邮件：“[e-mail]”，密码：“$2a$10$6YAUpy4kqTPApkF.v62zIe7ntE8OSrOLZ4iT4SwPoks9r2e8otYjC”，城市：“圣彼得堡”，邮编：“33709”，... proto：对象

所以我一切正常，但减速器没有改变初始状态