将 React 组件绑定到部分 Redux 状态

Question

我的 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

-> 警报减速器 -> Redux 存储更新 -> ONLY 警报容器组件重新渲染。

Answer 1

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

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

最简单、最快的方法是使用 React.PureComponent。您还可以覆盖

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

组件上。它应该包含提取与其相关的数据的逻辑。