While attempting to set up an ngrx store, I encountered 7 errors.
Error Messages: 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 understand the importance of state immutability, hence why I return a copy of my current state.
The issue may lie in the dispatch function within my component. Upon running console.log(fieldsArr), it 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 }));
}