Angular NgRx新语法reducer中如何在on()内添加状态处理代码？

你原来的旧reducer逻辑是在收到UPDATE_USER_SUCCESS时，复制现有用户数组，替换其中ID匹配的用户，再返回新状态。现在用createReducer的新语法，完全可以在on()的回调函数里先完成这些处理步骤，再返回最终的新状态，不用把所有逻辑都挤在返回的对象表达式里。

正确的写法如下：

export const MyReducer = createReducer(
    initState,

    on(UpdateUserActionSuccess, (state, { user }) => {
        // 先完成状态处理逻辑：替换数组中对应ID的用户
        const updatedUsers = state.users.map(u => u.id === user.id ? user : u);
        
        // 再返回不可变的新状态
        return {
            ...state,
            dataState: UserStateEnum.LOADED,
            currentUser: user,
            users: updatedUsers
        };
    }),
    //...其他case
);

关键说明： #

• on()方法的回调函数可以是多行函数体，不是只能用箭头函数直接返回对象。
• 处理状态时要遵循NgRx的不可变原则：用map生成新数组，而不是修改原数组；用扩展运算符...state复制原有状态的其他属性。
• 你之前写的state.users.concat(user)是错误的，这会把新用户追加到数组末尾，而不是替换已有用户，换成map处理后的updatedUsers就和旧reducer逻辑一致了。

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