为什么我会收到错误"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

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

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

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

编辑：

DashboardModel看起来像这样(为了简单起见，去掉了不相关的部分(

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

正如您所看到的，它有一个用于小部件的显式设置器。我的编辑认为它也不错。

Answer 1

我发现，禁用strictStateImmutabilityANDstrictActionImmutability可以解决问题。

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