React Redux reducer 未更新状态

Posted 2023-02-21

【中文标题】React Redux reducer 未更新状态

【英文标题】：React Redux reducer not Updating State

【发布时间】：2021-01-08 14:04:54

【问题描述】：

所以我有一个减速器，每当我调用“登录”操作时，它似乎根本不会更新状态。我的 React Redux 代码可能有问题。要么是我的组件在 store 的状态发生变化时没有重新渲染，要么是 reducer 根本没有改变 store 的状态。

减速机------

const initialState = 
    messages: [],
    loginDetails: 
        email: '',
        password: ''
    ,
    activeUsers: [],
    loginActive: false


const messageReducer = (state = initialState, action) => 
    switch(action.type) 
        case 'ADD_MESSAGE': 
            if(state.messages.length < 50) 
                let newStateMessages = [...state.messages]
                newStateMessages.unshift(action.payload);
                console.log(newStateMessages);
                return ...state, messages: newStateMessages;
             else 
                let newStateMessages = [...state.messages]
                newStateMessages.pop();
                newStateMessages.unshift(action.payload);
                return ...state, newStateMessages;
            
        case 'LOGIN':
            console.log('LOGIN');
            console.log(action);
            const newLoginDetails = 
                email: action.payload.email,
                password: action.payload.password
            ;
            console.log(...state, loginDetails: newLoginDetails);
            return ...state, loginDetails: newLoginDetails;
        case 'UPDATE_USERS':
            const newActiveUsers = action.payload;
            return ...state, activeUsers: newActiveUsers;
        case 'LOGIN_ACTIVE':
            return ...state, loginActive: true;
        case 'LOGIN_EXIT':
            return ...state, loginActive: false;
        default:
            return state;
    


export const store = createStore(messageReducer);

React Redux 连接 -----

    const mapStateToProps = state => 
      return  ...state 
    

    export default connect(mapStateToProps)(Home);

这个 mapStateToProps 返回...

   activeUsers: []
   dispatch: ƒ dispatch(action)
   loginActive: true
   loginDetails: email: "", password: ""
   messages: []
   __proto__: Object

什么时候应该返回...

   activeUsers: []
   loginActive: true
   loginDetails: email: "[e-mail]", password: 
   "password"
   messages: []
   __proto__: Object

我已经测试了对 reducer 的调度是否被调用，并且有效负载是正确的。但是，reducer 无法使用 LOGIN 操作类型更新状态。

【问题讨论】：

提供的代码示例没有显示可能导致问题的迹象。你会提供可执行的sn-p，重现你的问题吗？

case 'LOGIN' 中的控制台语句被命中，但 props 没有值？你确认mapStateToProps处于什么状态了吗？

action 参数是什么样的？您能否为LOGIN 操作包含console.log(action) 输出

【参考方案1】：

你能试试这个吗：

const mapStateToProps = (activeUsers,loginActive,loginDetails,messages) => (
   activeUsers,
   loginActive,
   loginDetails,
   messages
)