如何从 mapStateToProps 中的多个 Redux 切片中正确选择？

Question

我的 Redux 存储是标准化的，即它非常平坦，每个实体类型都有自己的切片。

这是我的 Redux 商店的简化示例：

drawings
  1: {name:'D1', thumbnailId: 33}
  2: {name:'D2', thumbnailId: 34}

thumbnails
  33: {filePath: 'path to local file'}
  34: {filePath: null (i.e. needs to be downloaded)}

显示图纸的列表视图需要重新渲染相应的缩略图：

• 图纸切片发生变化，即新的、删除的或更新的图纸

• 任何引用的缩略图都会发生变化，即缩略图 34 最终会被下载（下载由 Redux-Saga 异步处理）

我当前的 ma​​pStateToProps 显然存在缺陷，因为它从 Redux 商店中进行了过多的选择。这发生在实际视图获取其新道具之前，因此我无法通过shouldComponentUpdate 控制它。

我的应用中有几个地方需要更好的解决方案。

这是我有缺陷的 mapStateToProps（我正在使用 Immutable.js）：

(state, ownProps) => {
  const drawings = selectProjectDrawings(state, ownProps.projectId).map(drawing => {
    const thumbnailFileGuid = drawing.get('thumbnailFileGuid');

    if (!thumbnailFileGuid) return drawing;
    const filePath = selectFile(state, thumbnailFileGuid).get(THUMBNAIL_FILE_PATH_FIELD);
    return filePath ? drawing.set('_thumbnailFilePath', filePath) : drawing;
  });

  return {
    drawings: drawings
  };
}

编辑：

我目前的解决方案的一个非常糟糕的事情是我正在创建新的绘图对象，方法是使用 _thumbnailPath 来扩充它们。这意味着我无法比较 shouldComponentUpdate 中的对象引用，因为引用总是被更改。

能够比较对象引用是不改变对象的主要论据之一，但我用我有缺陷的解决方案放弃了这个机会。

Answer 1

我建议将此逻辑放在选择器后面。 reselect 是一个选择器记忆库，这意味着它将为您对值进行深度比较，如果返回的对象和其中的所有属性保持不变（包括深树状结构），那么它将返回原始对象.

React 然后会注意到这是同一个对象实例（不是新的）并且不会重新渲染。如果您在选择器中重新创建绘图对象是可以的，因为您没有在任何持久状态下捕获它。

旁注：随着您的应用程序的增长，您会注意到所有连接的组件都会被调用mapStateToProps，即使它与它无关，因此使用记忆选择器确实很有帮助。否则你的componentShouldUpdate 会很快变得复杂。