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

在全局商店中更新DumbComponent时，state.playlistsBySource['local']的呈现方法无法调用。

UPDATE2：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中直接改变状态，而不是不可变地返回修改后的副本。有关详情，请参阅http://redux.js.org/docs/FAQ.html#react-not-rerendering上的Redux常见问题答案。

更新：

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

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

如果没有在上下文中看到你的整个状态结构和动作，就很难确切地说出来，但我认为你很可能确实在你的一个嵌套字段中进行直接变异。

当嵌套对象更新时，Redux不会重新渲染

1 个答案: