When I'm trying to create ngrx store I'm getting 7 errors.
TypeError: Cannot assign to read only property '18' of object '[object Array]' | TypeError: Cannot assign to read only property 'incompleteFirstPass' of object '[object Object]' | TypeError: Cannot read properties of undefined (reading '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;
}
I know that state must be immutable, and because of this, I return a copy of my current state.
I have dispatch in my component and there must be a problem. console.log(fieldsArr) returns 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 }));
}
The problem is probably the TemplateRef, because these are dispatched to the store, these will be frozen. I'm not 100% sure, but my guess is that Angular mutates the TemplateRef on change detection. Because this is the same instance as the one that is frozen by the store, this error is thrown.
The TemplateRef will be mutated which is forbidden by the architecture of NGRX. If you want to use TemplateRef in ngrx/store, you should deactivate rules of mutation for ngrx like this :
StoreModule.forRoot({}, {
runtimeChecks: {
strictStateImmutability: false,
strictActionImmutability: false,
}
}),