reactjs - 更新嵌套对象时 Redux 不重新渲染

Question

此题请引用以下函数:

const mapStateToProps = (state) => {
  return {
    currentPlaylist: state.currentPlaylist,
    currentSong: state.currentSong,
    localPlaylists: state.playlistsBySource['local'],
    videoSize: state.videoSize,
  };
}

这是容器的 mapStateToProps 函数。我希望在每次更新 state.playlistsBySource['local'] 时重新呈现连接到此容器的组件。但是，即使 state.playlistsBySource['local'] 更新了，它也没有呈现，所以我将代码更改为以下内容:

const mapStateToProps = (state) => {
  return {
    currentPlaylist: state.currentPlaylist,
    currentSong: state.currentSong,
    playlists: state.playlistsBySource,
    videoSize: state.videoSize,
  };
}

然后每次更新 state.playlistsBySource['local'] 时连接的组件都会正确更新。但这是一种浪费，因为连接的组件不需要整个 playlists。

为什么会发生这种情况，解决它的正确方法是什么？

更新

我这样连接组件:

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DumbComponent);

当 state.playlistsBySource['local'] 在全局存储中更新时，不会调用 DumbComponent 的渲染方法。

更新 2:Reducer 似乎是不可变的。我是不是漏掉了什么？

case CONSTANTS.UPDATE_LOCAL_PLAYLIST:
  var playlistUpdated = transformedPlaylist(state[action.playlist.source], action);
  return updatedPlaylists(playlistUpdated, state);

function transformedPlaylist(state=[], action) {
  var oldPlaylist = _.find(state, (pl) =>
    pl.playlistName === action.playlist.playlistName);

  switch (action.type) {
    case CONSTANTS.RECEIVE_PLAYLIST:
    case CONSTANTS.UPDATE_LOCAL_PLAYLIST:
      return Object.assign({}, oldPlaylist, action.playlist, {
        isFetching: false,
      });
    default:
      return oldPlaylist
  }
}

function updatedPlaylists(playlistUpdated, oldPlaylists) {
  const source = playlistUpdated.source;
  const idxToUpdate = _.findIndex(oldPlaylists[source], (pl) =>
    pl.playlistName === playlistUpdated.playlistName
  );
  var playlists = Object.assign({}, oldPlaylists);
  playlists[source][idxToUpdate] = playlistUpdated;
  return playlists;
}

Answer 1

如果您可以发布您的 reducer 的相关代码，将会有所帮助。然而，绝大多数时候，你的组件没有更新的原因是你直接在你的 reducer 中改变状态，而不是一成不变地返回修改后的副本。请参阅 http://redux.js.org/docs/FAQ.html#react-not-rerendering 上的 Redux 常见问题解答。获取更多信息。

更新:

这一行看起来很可疑:playlists[source][idxToUpdate] = playlistUpdated;

请记住，如果您不可变地更新嵌套数据，则必须返回复制和更新的项目，一直到数据的顶部。

如果没有在上下文中看到您的整个状态结构和操作，很难准确判断，但我认为您很可能确实在您的嵌套字段之一中进行了直接突变。