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

而是創建一個新數組。