在React和Redux中如何不突变原状态地替换更新整个state数组

你的原有代码错误点在于对传入的state参数做了赋值操作，属于对入参的突变，违反Redux reducer纯函数规则。同时reducer仅需要返回新的状态值即可，不需要修改入参，Redux会自动将返回值作为新的状态使用。

场景对应实现方案 #

场景1：payload为全新独立数组 #

如果你可以确认payload是接口返回、或业务逻辑生成的和原state无引用关联的完整新数组，直接返回payload即可：

const chatsReducer = (state = chats, {type, payload}) => {
  switch (type) {
    case '@updateChats':
        return payload
    default:
        return state
  }
}

场景2：无法确认payload引用关系 #

如果你不确定payload是否和原state存在共享引用，可以做一层浅拷贝生成新数组返回：

const chatsReducer = (state = chats, {type, payload}) => {
  switch (type) {
    case '@updateChats':
        // 展开运算符生成新数组，切断引用关联
        return [...payload]
    default:
        return state
  }
}

场景3：存在嵌套对象修改风险 #

如果后续业务逻辑可能修改payload内部的messages、users等嵌套结构，担心污染状态可以做深拷贝后返回：

const chatsReducer = (state = chats, {type, payload}) => {
  switch (type) {
    case '@updateChats':
        // 无特殊类型（函数、Symbol等）的场景可以直接用JSON序列化实现深拷贝
        return JSON.parse(JSON.stringify(payload))
    default:
        return state
  }
}

内容的提问来源于stack exchange，提问作者Gabriel Caramés