React Redux reducer 未更新状态答案

【问题标题】：React Redux reducer not Updating StateReact Redux reducer 未更新状态
【发布时间】：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: "example@gmail.com", password: 
   "password"}
   messages: []
   __proto__: Object
}

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

【问题讨论】：

提供的代码示例没有显示可能导致问题的迹象。你会提供可执行的sn-p，重现你的问题吗？
case 'LOGIN' 中的控制台语句被命中，但 props 没有值？你确认mapStateToProps处于什么状态了吗？
action 参数是什么样的？您能否为LOGIN 操作包含console.log(action) 输出

标签： javascript reactjs redux react-redux

【解决方案1】：

你能试试这个吗：

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

【讨论】：