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

Question

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

I want to create 2 arrays with TemplateRefs and then exchange Reft within these 2 arrays. But firstly I want to write some starting Refs. — IRainbovvI
– IRainbovvI, Commented Nov 8, 2021 at 18:31

timdeschryver · Accepted Answer · 2021-11-08 19:59:29Z

1

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 Nov 8, 2021 at 19:59

timdeschryver

15.6k2 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IRainbovvI Over a year ago

So, what can I do to prevent this from happening?

cyberbobjr · Accepted Answer · 2022-07-04 13:01:06Z

0

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

answered Jul 4, 2022 at 13:01

cyberbobjr

2392 silver badges6 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related