CODEWITHSUNDEEP
javascriptangulartypescriptfrontendngrx
IRainbovvI
IRainbovvI

Reputation: 11

NGRX Store. Cannot assign to read only property '18' of object '[object Array]'

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

Upvotes: 0

Views: 1326

Answers (2)

cyberbobjr
cyberbobjr

Reputation: 239

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,
                }
              }),

Upvotes: 0

timdeschryver
timdeschryver

Reputation: 15505

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.

Upvotes: 1

Related Questions