Cuando intento crear una tienda ngrx, obtengo 7 errores.

TypeError: no se puede asignar a la propiedad de solo lectura '18' del objeto '[matriz de objetos]' | TypeError: no se puede asignar a la propiedad de solo lectura 'incompleteFirstPass' del objeto '[object Object]' | TypeError: no se pueden leer las propiedades de undefined (leyendo 'valor')

reductor.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 }; }) );

acciones.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>[] }>() );

campos.modelo.ts

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

Sé que el estado debe ser inmutable y, por eso, devuelvo una copia de mi estado actual.

Tengo despacho en mi componente y debe haber un problema. console.log(fieldsArr) devuelve 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 })); }