将反应组分结合到还原态的一部分

Question

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

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

对于这部分状态中的每一部分，我都有一堆React Components包装在一个通过react-redux连接的容器中。 并且像这样有mapStateToProps

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

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

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

预期的行为

调度CREATE_ALERT - >警报减少器 - > Redux存储更新 - > 仅限警报容器组件重新呈现。

Answer 1

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

要修复此行为，您需要添加一些逻辑来比较您的组件是否具有不同值（不是引用）的道具。

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

检查Immutable.js ，它可以帮助您更改道具参考的智能方式。

Answer 2

如果使用connect方法，则只将选定的redux状态传递给组件，这将阻止呈现其他组件

例：

用户组件：

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

export default connect(mapStateToProps)(User)

警报组件：

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

export default connect(mapStateToProps)(Alert)

Answer 3

检查一下： 避免对帐

这解释了Neciu说的话。

Answer 4

使用connect创建的容器组件将始终接收有关商店所有更新的通知。

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