Redux推送到嵌套数组而不改变状态

Question

我有一个看起来像这样的状态对象：

PlaylistDictionary: {
  someId: {
    pages: []  // trying to push something to this array here
  },
  someId2: {
    pages: []  // trying to push something to this array here
  }, etc
}

我正在尝试更新“ pages”数组，但是我不断收到一条错误消息，说我正在改变状态。.我不明白，因为如果我使用Object.assign复制状态对象。我该如何改变状态？ 感谢您的任何帮助

case types.ADD_PAGE_TO_PLAYLIST: {
  let playlistDictCopy = Object.assign({}, state.playlistDict );

  if ( !playlistDictCopy[ action.playlistId ].hasOwnProperty('pages') ) {
    playlistDictCopy[ action.playlistId ].pages = [];
  }

  playlistDictCopy[ action.playlistId ].pages.push( action.pageId );

  return Object.assign( {}, state, { playlistDict: playlistDictCopy } );
}

Answer 1

您正在制作状态对象的浅表副本，根本不复制任何属性值，包括数组本身，因此要对数组进行突变。

您的.push调用会更改数组，并且由于尚未创建新数组，因此也会影响所有以前存储的状态对象。

你可以做

playlistDictCopy[ action.playlistId ].pages = playlistDictCopy[ action.playlistId ].pages.concat([action.pageId]);

要么

playlistDictCopy[ action.playlistId ].pages = [ ...playlistDictCopy[ action.playlistId ].pages, action.pageId]);

而是创建一个新数组。