嵌套子项的 NGXS 状态更改

Question

我正在尝试更新我所在状态的嵌套子项，但总是以错误结束，指出"无法分配给只读属性"。这可能是因为我正在使用不可变状态。但是我该如何更改嵌套的子项呢？

这是代码：

@Action(UpdatePortalLogo)
updatePortalLogo(
ctx: StateContext<PortalStateModel>,
{ logo }: UpdatePortalLogo
) {
const state = ctx.getState();
let portal = state.portals.find((portal) => portal.id === state.portalId);
portal.style.logo = logo; //-> this is the line where it fails
ctx.setState(
patch({
portals: updateItem<Portal>(p => p.id === ctx.getState().portalId,
portal)
}));
}

我的状态模型如下所示：

export interface PortalStateModel {
portals: Portal[];
portalId: string;
loaded: boolean;
loading: boolean;
}

我需要使用子状态才能正常工作吗？

Answer 1

这是因为NGXS在开发模式下使用deepFreeze。您可以通过以下方式进行检查：

console.log(Object.isFrozen(portal));

您可以通过在导入根模块时将developmentMode设置为false来关闭它：

NgxsModule.forRoot([], { developmentMode: false })

但是你不想这样做，因为"冻结"会阻止你做不可预测的突变。

破坏是你的武器：

const portal = { ...state.portals.find((portal) => portal.id === state.portalId) };

此外，updateItem运算符可以将函数作为第二个参数，您可以在其中更新对象。因此，代码变得更加具有声明性：

ctx.setState(
patch({
portals: updateItem(
portal => portal.id === state.portalId,
portal => {
const newPortal = { ...portal };
newPortal.style.logo = logo;
return newPortal;
}
)
})
);