NGRX商店。无法将对象'[object Array]'的只读属性'18'分配给

Question

当我试图创建ngrx存储时，我遇到了7个错误。

TypeError:无法分配给对象"[object Array]"的只读属性"18"| TypeError:不能分配给对象"[object object]"的只读属性"incompleteFirstPass"| TypeError：无法读取未定义(读取"value"(的属性

还原剂.ts

import { createReducer, on } from '@ngrx/store';
import { Fields } from '../fields.model';
import { addAllFields } from './fields.action';
export const initialState: Readonly<Fields> = {
arrStart: [],
arrEnd: [],
};
export const fieldsReducer = createReducer(
initialState,
on(addAllFields, (state, { extArr }) => {
return { ...state, arrStart: extArr };
})
);

actions.ts

import { TemplateRef } from '@angular/core';
import { createAction, props } from '@ngrx/store';
export const addAllFields = createAction(
'[Fields Array]Add fields to starting array',
props<{ extArr: TemplateRef<any>[] }>()
);

fields.model.ts

import { TemplateRef } from '@angular/core';
export interface Fields {
arrStart: TemplateRef<any>[] | null;
arrEnd: TemplateRef<any>[] | null;
}

我知道状态必须是不可变的，因此，我返回当前状态的副本。

我的组件中有调度，肯定有问题。console.log(fieldsArr(返回2 TemplateRef

constructor(private store: Store) {}
ngOnInit(): void {}
ngAfterViewInit() {
const fieldsArr: TemplateRef<any>[] = [this.inputField, this.textareaField];
console.log(fieldsArr);
this.store.dispatch(addAllFields({ extArr: fieldsArr }));
}

Answer 1

问题可能是TemplateRef，因为它们被调度到商店，所以它们将被冻结。我不是100%确定，但我的猜测是Angular在变化检测中突变了TemplateRef。因为这与存储冻结的实例是同一个实例，所以会引发此错误。

Answer 2

TemplateRef将发生突变，这是NGRX架构所禁止的。如果你想在ngrx/store中使用TemplateRef，你应该停用ngrx的突变规则，如下所示：

StoreModule.forRoot({}, {
runtimeChecks: {
strictStateImmutability: false,
strictActionImmutability: false,
}
}),