Redux Toolkit + Immer开发时能否直接修改action的payload？

结论 #

直接修改action.payload的写法不被允许，属于错误实践。

原因 #

1. Redux 核心规范要求 action 是只读的纯描述对象，reducer 的职责仅为根据 action 内容更新状态，不允许反向修改 action 本身。
2. Redux Toolkit 依赖 Immer 实现的「可变写法」仅作用于你传入 reducer 的state对象：Immer 只会对 state 树做代理和 immutable 转换，对于不属于 state 树的外部对象（比如action.payload）不会做任何保护。你对action.payload的修改属于直接突变普通 JavaScript 对象，如果这个对象在应用其他位置还有引用，会引发难以排查的连锁bug。

正确写法 #

你提到的先拷贝再修改的写法才是符合规范的，注意修正语法错误（属性赋值用冒号，属性之间用逗号分隔）：

const newSong = {
    ...action.payload,
    lastPopulated: Date.now()
}

如果 payload 结构复杂嵌套较深，也可以单独用 Immer 的produce方法处理 payload 后再写入 state。

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