Redux中Create Action的正确返回方式及状态更新异常排查

我在使用Redux时遇到一个问题：调用Create Action时会同时更新其他状态。现在想明确：Redux中Create Action对应的reducer应该如何正确返回状态？

相关reducer代码如下：

import * as actionTypes from 'constants/actionTypes';

export default (models = [], action) => {
    switch (action.type) {
        case actionTypes.FETCH_MODELS:
            return action.payload.result;
        case actionTypes.CREATE:
            return [...models, action.payload.result];
        case actionTypes.UPDATE:
            return models.map((model) => (model.model_id === action.payload.result.model_id ? action.payload.result : model));
        case actionTypes.DELETE:
            return models.filter((model) => model.model_id !== action.payload);
        default:
            return models;
    }
};

核心分析与结论 #

你当前reducer中CREATE分支的写法本身是符合Redux immutable要求的：通过展开原数组[...models]创建新数组，再添加新的model对象，没有修改原state数组，这是正确的返回方式。

出现「调用Create时更新其他状态」的异常，大概率不是Create分支的返回逻辑问题，而是其他环节出了问题，常见排查方向：

• 检查action.payload.result是否为全新对象：如果这个新model是从现有state的对象中直接复用、浅拷贝而来，后续对该对象的修改会意外影响到已有状态。建议创建新model时做深拷贝，比如用JSON.parse(JSON.stringify(newModel))，或者使用immer库简化immutable操作。
• 确认action的type是否正确：有没有可能Create的action type和Update的type混淆，导致触发了Update分支？
• 排查组件逻辑：是否在dispatch Create Action的同时，不小心额外dispatch了Update Action？
• 检查action creator：在创建Create Action的过程中，有没有直接修改原state中的数据？Redux要求action creator必须是纯函数，不能直接操作state。

内容的提问来源于stack exchange，提问作者Pusoy