开发者问题收集

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