Immer - 變異新創建的嵌套 Object

Question

我正在使用 immer（通過redux-toolkit中的createSlice ）在 redux 應用程序中管理 state。 我編寫了一個reducer，它接收音樂曲目的有效負載並將它們添加到用戶庫中。 在某種程度上，這個 reducer 還必須為每個軌道創建藝術家條目。

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

這適用於每個藝術家的第一首曲目。 但是，當 immer 創建每個新藝術家 object 並將其添加到 state 時，它會使每個 object 的軌道陣列不可擴展。

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

被拋出

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

我推測這是因為我沒有正確創建嵌套藝術家草稿，或者 redux 不支持這種行為。 這就是為什么我從使用純 object 轉向使用嵌套浸入草稿的原因——但這似乎不起作用。

我也試過...

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

...但在這種情況下， tracks屬性是只讀的。

我怎樣才能在沒有錯誤的情況下實現這個？

Answer 1

我終於追查到了這一點。 我的減速器編寫正確，但是在堆棧的更高層，我不小心從redux-immer導入combineReducers而不是redux本身。 redux-immer是一個用於將 immer 集成到 redux 中的庫。

這導致我的商店通過 immer 運行兩次（一次通過createSlice和一次通過combineReducers ），這導致......意外......行為，包括 immer 鎖定本身，導致上述對象被鎖定。

毫無疑問，這是度過過去兩周的一種有趣方式。