ERROR TypeError: Cannot assign to read only property '0' of object '[object Array]

[st-clair-clarke]

I am trying to use elf/immer to update the first item in a tuple.

export type LUnitType = 'SI' | 'US'

export type TLabReference = [
	[number, number], // range : [upper, lower]
	[LUnitType, string], // SI
	[LUnitType, string], // US
	string[], // specimen
	string, // request
	number, // conversion factor
]

export interface IHaemostasisPreference {
	bFibrinogen: TLabReference // Factor I
}

export class HaemostasisPreference {
	[immerable] = true
	id: ID = nanoid()

	bFibrinogen: TLabReference = [
		[1.5, 4.0],
		['SI', Unit.gpl],
		['US', Unit.mgpdl],
		['Plasma'],
		'Fibrinogen | Factor I | FIG',
		1,
	]
}

export interface IHaematologyPreference {
	haemostasis: IHaemostasisPreference
}

export class HaematologyPreference {
	[immerable] = true
	id: ID = nanoid()
	haemostasis: IHaemostasisPreference = new HaemostasisPreference()
}

export type TRange = [
	number, // reference interval, lower bound
	number, // reference interval, upper bound
]

export interface IPreference {
  haematology: IHaematologyPreference
}

export class Preference {
	[immerable] = true
	id: ID = nanoid()

	haematology: IHaematologyPreference = new HaematologyPreference()

}

My repository update function is shown below:

update(property: string, path: string, range: TRange) {
		store.update(
			write((state: IPreference) => {
				const paths = path.split('|')
			
				if (paths.length === 2) {
					state[paths[0]][paths[1]] = {
						...state[paths[0]][paths[1]],
						[property]: range, // PROBLEMATIC ASSIGNMENT - 
					}
				}

			}),
		)

My UI snippet is shown below:
// HaemostasisPreferenceComponent template

  <dxi-item>
    <dx-range-selector
      [(value)]="pref.bFibrinogen[0]"
      [caption]="pref.bFibrinogen[4]"
      [path]="path"
      [unit]="pref.bFibrinogen[1][1]"
      pimDxRangeSelector
      property="bFibrinogen"
    >
      <dxo-scale
        [minorTickInterval]="0.25"
        [tickInterval]="0.5"
        [startValue]="pref.bFibrinogen[0][0] - 1"
        [endValue]="pref.bFibrinogen[0][1] + 1.5"
        pimDxoScale
      >
        <dxo-label pimDxoLabel></dxo-label>
      </dxo-scale>
    </dx-range-selector>
  </dxi-item>

export class HaemostasisPreferenceComponent implements OnInit {
	@Input() pref = new HaemostasisPreference()
	path = 'haematology|haemostasis'
	unit = Unit

	constructor(private _repo: PreferenceRepository) {}

	ngOnInit(): void {
		this._repo.haemostasis$.subscribe((haemostasis) => {
			this.pref = { ...this.pref, ...haemostasis }
		})
	}
}

Whenever the range is updated, I get the following error (that originates in the update() function above)

core.mjs:6469 ERROR TypeError: Cannot assign to read only property '0' of object '[object Array]'
    at HaemostasisPreferenceComponent_Template_dx_range_selector_valueChange_8_listener (haemostasis-preference.component.ts:59)
    at executeListenerWithErrorHandling (core.mjs:14949)
    at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.mjs:14993)
    at Object.next (Subscriber.js:110)
    at SafeSubscriber._next (Subscriber.js:60)
    at SafeSubscriber.next (Subscriber.js:31)
    at Subject.js:31
    at errorContext (errorContext.js:19)
    at EventEmitter_.next (Subject.js:26)
    at devextreme-angular-core.js:128

The ReduxDevTool appears as below

Thanks for helping.

[NetanelBasal]

Reproduce on stackblitz, please.

[st-clair-clarke]

Please see the link: https://codesandbox.io/s/numeric-scale-lightweight-devextreme-range-selector-forked-01cbn?file=/src/app/app.component.ts

Move any of the slider and you will see that the slider flag number is lost and an error is generated in the console. The console error points to the app.component.html error.

I think that it is because of the assignment to the array in src/ap/model/preference-repository.model.ts - line 39.

Thank you for helping.

[NetanelBasal]

I don't think it's related. I removed the assignment code and still get an error. I suspect the library you use.

[st-clair-clarke]

When I comment the code in preference.repository as shown below, there is no error, BUT NEITHER IS THE REPO UPDATED.

if (paths.length === 2) {
          state[paths[0]][paths[1]] = {
            // ...state[paths[0]][paths[1]]
            //[property]: range // error in array assigment
          };
        }

Is there another way I could structure it to get rid of this error- as shown above it is the assignment of the object that generates the issue.

[NetanelBasal]

Try state[paths[0]][paths[1]][property] = range