Issue
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 }));
}
Solution
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.
Answered By - timdeschryver
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.