绑定反应组分Redux的状态

问题描述：

I的一部分具有终极版商店，看起来像这样：绑定反应组分Redux的状态

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

对于状态的此部分中的每一个我有一堆包裹在经由连接的容器至极反应的组分的react-redux。并具有mapStateToProps这样

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

问题，当我如推出像CREATE_ALERT或EDIT_ALERT和Redux的状态警报更新了一些行动，ALL反应的组分将响应这一变化甚至是那些与像不同的部分作品sources或reports。

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

预期的行为

调度CREATE_ALERT - >警报减速机 - >终极版存储更新 - >ONLY警报容器组件重新渲染。

答

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

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

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

还请检查Immutable.js它可以帮助你改变道具的引用的智能方式。

谢谢，我会检查出来。顺便说一句，你对此有何看法？ https://www.npmjs.com/package/reselect 你有没有与此有关的一些经验？ – Strangerliquid

Reselect是一个很好的momoizing库，用于选择redux。其momoizing属性将解决您的问题。不过，我强烈推荐使用'PureComponent'作为开始（它已经在React中）。 – neciu

我会先试一下/我会在今天晚上进行一些测试。使用PureComponents，Selectors和ImmutableJS 并在此报告结果 – Strangerliquid

答

如果使用连接方法，然后通过仅选择Redux的状态到该组件，这将防止其它部件

的渲染

例如：

用户组件：

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

export default connect(mapStateToProps)(User)

警报成分：

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

export default connect(mapStateToProps)(Alert)

答

检查了这一点：Avoid Reconciliation

这里解释什么neciu说。

答

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

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