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 锁定本身，导致上述对象被锁定。

毫无疑问，这是度过过去两周的一种有趣方式。