如何在Ngrx reducer函数中正确实现向state添加数据的功能

正确实现代码 #

function AddHandler(state: StoreMessages, action) {
    return {
        ...state,
        messages: [...state.messages, action.newMessage],
        all: [...state.all, action.newMessage]
        // 若新增消息需要默认选中，补充下方代码即可
        // selections: [...state.selections, action.newMessage.messageId]
    };
}

问题原因说明 #

• Array.prototype.push 是原地修改数组的方法，会直接修改原state内的数组对象，违反NgRx reducer要求的状态不可变原则，会导致后续状态变更检测出现异常
• push 方法的返回值为操作完成后数组的长度，而非修改后的数组本身，这也是你代码里属性变为数值类型的直接原因

其他补充说明 #

如果需要将新增消息放在列表最顶部（最新消息置顶），只需调整元素顺序即可：

messages: [action.newMessage, ...state.messages]

所有涉及NgRx状态内数组的更新，都不要使用push、pop、splice、reverse、sort这类原地修改数组的方法，优先使用扩展运算符、concat、filter、map这类返回新数组的方法实现不可变更新。

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