NGRX 状态更新答案

【问题标题】：NGRX state updateNGRX 状态更新
【发布时间】：2022-06-18 01:31:16
【问题描述】：

这是我的状态：-

roles =[ {
roleId:\"8e8be141-130d-4e5c-82d2-0a642d4b73e1\"
name:\"HR\"
description:\"HR of the Company\"
isModerator:\"N\"
},
{
roleId:\"8e8be141-130d-4e5c-82d2-0a642d4b73e1\"
name:\"MR\"
description:\"MR of the Company\"
isModerator:\"Y\"
}]

这是我的减速机：-

on(updateRoleItem, (s, { roleId, item }) => {
        let modifiedState = [...s];
        modifiedState.map((data) => {
            if (data.roleId === roleId) {
                data.name = item;
            }
        })
        return modifiedState;
    })
);

这是我得到的错误：-

我想更新角色数组中角色的名称属性。所以我正在寻找对象通过 roleId 然后更新名称，但我收到错误。有人可以用正确的方法帮助我吗？

let modifiedState = JSON.parse(JSON.stringify([...s]))我不确定这是不是正确的做法
您好，它按预期工作，谢谢。

标签： angular typescript ngrx redux-reducers redux-store

【解决方案1】：

默认情况下，NgRx 状态（和操作）为immutable。这意味着您不能简单地更新属性，而必须先创建一个克隆。为此，您可以使用其余扩展语法。你也可以使用ngrx-immer。

on(updateRoleItem, (s, { roleId, item }) => {
        return s.map(data => {
          if (data.roleId === roleId) {
                return {...data, name: item };
          }
          return data;
        });
    })
);

使用ngrx-immer

immerOn(updateRoleItem, (s, { roleId, item }) => {
    
        s.map((data) => {
            if (data.roleId === roleId) {
                data.name = item;
            }
        })
    })
);

【讨论】：