我有一个看起来像这样的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
等不同部分。
我的问题:如何将某些组件“绑定”到树的某些部分。因此,每个容器组件仅在更新状态更新时才会更新并忽略其他更改。
预期行为
发货CREATE_ALERT
- >警报减速器 - > Redux商店更新 - > 仅警报容器组件重新呈现。
答案 0 :(得分:3)
当你在redux中改变状态时,整个状态变成了一个新对象。 然后你的组件由这个新对象(新引用)给出并重新渲染自己。
要解决此问题,您需要添加一些逻辑来比较您的组件是否具有不同值(不是引用)的道具。
最简单快捷的方法是使用React.PureComponent。您还可以覆盖shouldComponentUpdate
功能并自行处理更改。但请注意,PureComponent
仅适用于基元(它进行浅层比较)。
同时检查Immutable.js,它可以帮助您更改道具参考的智能方式。
答案 1 :(得分:0)
如果使用connect方法,则只将选定的redux状态传递给组件,这将阻止渲染其他组件
示例:
用户组件:
const mapStateToProps = state =>({
users: state.users
});
export default connect(mapStateToProps)(User)
警报组件:
const mapStateToProps = state =>({
alerts: state.alerts
});
export default connect(mapStateToProps)(Alert)
答案 2 :(得分:0)
检查出来:Avoid Reconciliation
解释了 Neciu 所说的内容。
答案 3 :(得分:0)
使用connect
创建的容器组件将始终收到有关商店所有更新的通知。
使用这些更新的责任在于接收connect
组件。它应该包含提取与之相关的数据的逻辑。