Estoy usando immer (a través de createSlice en redux-toolkit ) para administrar el estado en una aplicación redux. He escrito un reductor que toma una carga útil de pistas de música y las agrega a la biblioteca de los usuarios. En parte, este reductor también debe crear entradas de artistas para cada una de las pistas.

 createTracks(draft, action: PayloadAction<{ tracks: Array<ITrack> | ITrack; }>) { ... tracks.forEach((track, index) => { ... // Check to see if artist exists, if not create, if so, add this track let artist = draft.artists[artistId]; if (!artist) { console.log("creating artist", track.artist); draft.artists[artistId] = produce({ name: track.artist, albums: [], id: artistId, tracks: [track.id] }, (artistDraft): IArtist => { console.log("producing the artist"); return artistDraft; }); } else { console.log("updating artist"); draft.artists[artistId].tracks.push(track.id); }

Esto funciona bien para las primeras pistas de cada artista. Sin embargo, cuando immer crea cada nuevo objeto de artista y lo agrega al estado, hace que la matriz de pistas para cada objeto no sea extensible.

 Uncaught TypeError: Cannot add property 1, object is not extensible

es arrojado desde

 draft.artists[artistId].tracks.push(track.id);

Supuse que esto se debe a que no estoy creando correctamente el borrador del artista anidado o redux no admite este comportamiento. Es por eso que cambié de usar un objeto puro a un borrador de inmersión anidado, pero esto no pareció funcionar.

tambien he probado...

 draft.artists[artistId].tracks = [...draft.artists[artistId].tracks, track.id];

... pero en este caso, la propiedad tracks es de solo lectura.

¿Cómo puedo implementar esto sin el error?