javascript - 将 react 组件绑定(bind)到部分 redux 状态

Question

我有一个看起来像这样的 redux store:

{
  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 状态已更新时，ALL REACT COMPONENTS WILL RESPOND TO THIS CHANGE 甚至是那些与不同部分一起工作的，例如 sources 或 reports。

我的问题:如何将某些组件“绑定(bind)”到树的某些部分。因此每个容器组件将仅在 REDUX 状态的适当部分更新时更新并忽略其他更改。

预期行为

调度 CREATE_ALERT -> Alert reducer -> Redux store update -> ONLY Alert container component re-rendering.

Answer 1

当你在 redux 中改变状态时，整个状态变成了一个新对象。然后你的组件由这个新对象(新引用)提供并重新渲染它自己。

要修复此行为，您需要添加一些逻辑来比较您的组件是否获得了具有不同值(不是引用)的 Prop 。

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

同时检查 Immutable.js这可以帮助您以智能方式更改 Prop 的引用。