react-立即将DataSet1和DataSet2存储到Redux Store，其中DataSet2从DataSet1派生

Question

（很抱歉，如果问类似的问题，但是我在多个动作分派中找到了问题，然后重新使用redux-batched-subscribe。这不是我想要的）

我需要制作一个类似于以下所示的仪表板。

它使用三个来源-DataSet1（用户添加的金额），DataSet2和DataSet3。

DataSet2和DataSet3是使用utils / function从DataSet1导出的（即某些计算是在DataSet1上完成的）。

只要DataSet1发生更改（用户添加新金额，对其进行编辑或删除），就应重新计算DataSet2和DataSet3，并且仪表板应立即进行完全更新。

我正在尝试设计它以避免重复计算和循环重新渲染。

我正在考虑使用Redux-Thunk来实现。

React做类似任务的方式是什么？

谢谢！

编辑： 删除了不必要的细节，添加了重新选择标签

Answer 1

欢迎使用React和Redux-当您掌握它时，它真棒。

我想您正在使用react-redux包来处理React和Redux之间的绑定。该程序包提供了一个名为Provider的类，您可以在其中包装应用程序。Provider做几件事，但是其中一项重要功能是它订阅商店并在商店更改时触发重新渲染。

如@zzzzBov所述，派生的值不应添加到商店中。为此，我们使用选择器。在您的情况下，这意味着DataSet1位于商店中，而DataSet2和 DataSet3将由选择器计算。为了清楚起见，这是用户更改DataSet1时的事件流：

1. 用户更改DataSet1，您在mapDispatchToProps()中定义的功能会在商店上调度操作。
2. 减速器运行，生成一个新的状态对象。
3. 商店的所有订户都会被调用并传递新的状态对象（在本例中为Provider）。
4. Provider触发了组件的有效重新渲染（通过有效，我的意思是它检查以查看它们在mapStateToProps()中选择的状态是否已更改）。
5. 您负责呈现DataSet2和DataSet3的组件从商店中选择DataSet1，并动态导出DataSet2和DataSet3，然后将它们传递给各自的组件。

如果您不想在每次更改存储时重新呈现DataSet2和DataSet3组件，请使用库reselect。重新选择缓存派生的值，这又避免了虚假的重新渲染。当状态更改时，重新选择检查以查看其输入值是否已更改，如果已更改，它将重新计算输出。然后，您的组件从“重新选择”中选择，而不是直接从状态对象中选择。

希望这会有所帮助。祝你好运！