将反应组件绑定到部分 redux 状态答案

【问题标题】：Bind react component to part of redux state将反应组件绑定到部分 redux 状态
【发布时间】：2017-03-31 20:09:09
【问题描述】：

我有一个看起来像这样的 redux 商店：

{
  user: {},
  alerts: [],
  reports: [],
  sourses: []
}

对于状态的每个部分，我都有一堆 React 组件包裹在一个容器中，该容器通过react-redux 连接。还有mapStateToProps这样的

(state) => {alerts: state.alerts}
(state, ownProps) => {alert: _.filter(state, {id: ownProps.curId})}

问题是，例如，当我为 CREATE_ALERT 或 EDIT_ALERT 之类的警报启动一些操作并更新 redux 状态时，所有反应组件都会响应此更改，即使是那些与不同部分一起使用的组件，例如sources 或 reports。

我的问题：如何将某些组件“绑定”到树的某些部分。所以每个容器组件只会在适当的部分 REDUX 状态更新时更新并忽略其他更改。

预期行为

Dispatch CREATE_ALERT -> Alert reducer -> Redux store 更新 -> ONLY 提醒容器组件重新渲染。

【问题讨论】：

【解决方案1】：

当你在 redux 中改变状态时，整个状态就变成了一个新对象。然后您的组件由这个新对象（新引用）给出并重新呈现自己。

要解决此问题，您需要添加一些逻辑来比较您的组件是否具有不同值的道具（不是参考）。

最简单快捷的方法是使用React.PureComponent。您还可以覆盖shouldComponentUpdate 函数并自行处理更改。但请注意，PureComponent 仅适用于原语（它进行浅比较）。

还可以查看Immutable.js，它可以帮助您以智能的方式更改道具的引用。

【讨论】：

谢谢，我去看看。顺便说一句，您对此有何看法？ npmjs.com/package/reselect你有这方面的经验吗？
Reselect 是 redux 选择器的不错的 momoizing 库。它的 momoizing 属性将解决您的问题。不过我强烈推荐使用 PureComponent 作为开始（它已经在 React 中了）。
我先试试/今晚我会做一些测试。使用 PureComponents、Selectors 和 ImmutableJS 并在此处报告结果
请注意，PureComponents 使用浅比较，因此如果您将对象作为道具传递，它可能无法正常工作。

【解决方案2】：

使用connect 创建的容器组件将始终收到有关存储的所有更新的通知。

使用这些更新的责任落在接收connect 组件上。它应该包含提取与其相关的数据的逻辑。

【讨论】：

【解决方案3】：

看看这个：Avoid Reconciliation

这里解释了Neciu所说的内容。

【讨论】：

【解决方案4】：

如果你使用 connect 方法，那么只将选中的 redux 状态传递给组件，这将阻止其他组件的渲染

示例：

用户组件：

 const mapStateToProps = state =>({
  users: state.users
  });

export default connect(mapStateToProps)(User)

警报组件：

const mapStateToProps = state =>({
  alerts: state.alerts
  });

export default connect(mapStateToProps)(Alert)

【讨论】：

如果接受答案的第一部分为真“当你在 redux 中改变状态时，整个状态就变成了一个新对象。然后你的组件由这个新对象（新引用）给出并重新-renderes self.”，那么组件是否仍然会重新渲染，因为它仍然会获得状态的新副本，即使它与以前相同？
@AdamPrax redux 是一个由多个小对象组成的大对象，因此当发生更改时，只会更改子对象，而不是实际的 redux 对象。所以如果你改变了 redux 的 User 对象，其他状态对象将保持不变。