为什么我收到错误 "Cannot assign to read only property"？

Question

我正在尝试将 ngrx 引入一个大型遗留 angular 应用程序（已升级到 Angular 11）。该应用程序有一个巨大的模型，几乎包含所有数据并且无法调整，因为它在公司中被广泛使用。

当时的想法是将模型的实例放入 ngrx 存储中，并借助“immer”和“ngrx-immer”更新相关部分。

我的问题是，更新部分内容会导致以下错误

// in the reducer    
dashboard.widgets.push(action.widget) 

ERROR TypeError: Cannot add property 1, object is not extensible
    at Array.push (<anonymous>)
    at dashboard.reducer.ts:39
    at ngrx-immer-shared.js:9
    at produce (immer.esm.js:1)
    at ngrx-immer-shared.js:9
    at ngrx-store.js:1265
    at combination (ngrx-store.js:242)
    at ngrx-store.js:747
    at ngrx-store.js:275
    at computeNextEntry (ngrx-store-devtools.js:426)

我也试过了

immerOn(DashboardActions.addWidgetToDashboard, (state, action) => {
    const dashboard = state.dashboards.find(d => d.id === action.dashboardId)
    if (dashboard) {
      dashboard.widgets = [...dashboard.widgets, action.widget]
    }
  }),

ERROR TypeError: Cannot assign to read only property '_widgets' of object '[object Object]'
    at DashboardModel.set (dashboard.model.js:54)
    at DashboardModel.set (validation-properties.js:104)
    at dashboard.reducer.ts:39
    at ngrx-immer-shared.js:9
    at produce (immer.esm.js:1)
    at ngrx-immer-shared.js:9
    at ngrx-store.js:1265
    at ngrx-immer-shared.js:9
    at produce (immer.esm.js:1)
    at ngrx-immer-shared.js:9

仪表板模型的小部件属性有 setters，它不是只读的。根据 https://immerjs.github.io/immer/update-patterns/#array-mutations 这应该有效。

我知道这种结构并不理想，但拆分模型不是一种选择。

如何更新 ngrx 状态的嵌套部分？我做错了什么？

编辑：

DashboardModel 如下所示（为简单起见删除了不相关的部分）

export declare class DashboardModel extends SelectableVisuItemBaseModel {
    private _widgets;
    constructor(name?: string);
    get widgets(): WidgetBase[];
    set widgets(value: WidgetBase[]);
}

如您所见，它有一个明确的 setter 小部件。我的编辑也觉得不错

Answer 1

我发现，禁用 strictStateImmutability AND strictActionImmutability 可以解决问题。

最初的问题可能来自模型上的注释setter，但我不确定。

为什么我收到错误 "Cannot assign to read only property"？

Why am I getting the error "Cannot assign to read only property"?

typescript

ngrx

angular

immer.js