NGRX 存储。无法分配给对象“[object Array]”的只读属性“18”
2021-11-08
1245
当我尝试创建 ngrx 存储时,出现了 7 个错误。
TypeError:无法分配给对象“[object Array]”的只读属性“18”| TypeError:无法分配给对象“[object Object]”的只读属性“incompleteFirstPass”| TypeError:无法读取未定义的属性(读取“value”)
reducer.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 }));
}
2个回答
问题可能出在
TemplateRef
上,因为这些被分派到商店,所以它们将被冻结。我不确定,但我的猜测是 Angular 在变化检测时会改变
TemplateRef
。由于这是与商店冻结的实例相同的实例,因此会抛出此错误。
timdeschryver
2021-11-08
TemplateRef 将被变异,这是 NGRX 架构所禁止的。 如果您想在 ngrx/store 中使用 TemplateRef,您应该停用 ngrx 的变异规则,如下所示:
StoreModule.forRoot({}, {
runtimeChecks: {
strictStateImmutability: false,
strictActionImmutability: false,
}
}),
cyberbobjr
2022-07-04