ERROR TypeError: Cannot assign to read only using immer.js

[st-clair-clarke]

I have the following function that uses gridData from a data-grid to update the state with name stateProp. The grid uses a select-box UI for the grid cell:

	dxDataGridRepoUpdater<T>(gridData: T[], stateProp: string): void {
		store.update((state: IHistory) => {
			const newState = produce(state, (draft) => {
				if (splitToken(stateProp)) {
					const token0: string = splitToken(stateProp)[0]
					const token1: string = splitToken(stateProp)[1]

					const record: Record<string, any[]> = {}
					record[token1] = { ...gridData }
					draft[token0] = { ...draft[token0], ...record }
				} else {
					draft[stateProp].length = 0
					draft[stateProp].push(...gridData)
				}
			})
			return newState
		})
	}

The select-box model is shown below:

import { immerable } from 'immer';
import { nanoid } from 'nanoid';

import { ID, regExp } from '@pim/common/shared/util';
import { maxLength, minLength, pattern, required } from '@rxweb/reactive-form-validators';

export interface IPc {
	id: ID
	duration: string
	complaint: string
}

export class Pc {
	[immerable] = true
	id = nanoid()

	complaint = ''
	duration = ''
}

On the first selection in the select-box, the state updates as normally.

However, if I attempt to chose a second option in the select-box and attempt to update it, I am getting the following error:

ERROR TypeError: Cannot assign to read only property 'complaint' of object '[object Object]'
    at assignValueToProperty (object.js:60)
    at deepExtendArraySafe (object.js:77)
    at update (array_utils.js:198)
    at inheritor._updateImpl (array_store.js:64)
    at inheritor._updateImpl (class.js:18)
    at inheritor.update (abstract_store.js:117)
    at ui.grid_core.editing.js:1259
    at ui.grid_core.editing.js:1195
    at _DeferredObj._promise.<computed> [as done] (deferred.js:46)
    at inheritor._executeEditingAction (ui.grid_core.editing.js:1189)

I think the error is caused by the assignment in the else block above

 draft[stateProp].length = 0
 draft[stateProp].push(...gridData)

Appreciate any help. Thanks

[NetanelBasal]

I will try to assist if you can reproduce the problem on stackblitz. Also, why aren't you working with Immer as I suggested?

[mdudek]

Hi, how to use setEntities with readonly array produced by Immer?

[NetanelBasal]

https://ngneat.github.io/elf/docs/immer/

[mdudek]

I understand the concept, I would like to ask if Elf could accept also 'readonly array' as parameter of setEntities (and other mutations & queries). There is now declared OrArray type, could it be extended?

[NetanelBasal]

Yes, do you want to create a PR?

[mdudek]

Ok, I will make one.