嵌套 child 的 ngxs 状态更改

Question

我正在尝试更新我所在州的嵌套 child，但总是以错误 'cannot assign to read only property' 告终。这可能是因为我正在使用不可变状态。但是我怎样才能改变那个嵌套的child呢？

代码如下：

@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 })

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

毁灭是你的武器：

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;
      }
    )
  })
);

嵌套 child 的 ngxs 状态更改

ngxs state change for nested child

angular

ngxs