React / Flux：我应该让商店听取其他商店的更改吗？

Posted 2023-02-22

【中文标题】React / Flux：我应该让商店听取其他商店的更改吗？

【英文标题】：React / Flux: Should I have stores listen to other stores for changes?

【发布时间】：2015-09-13 18:21:41

【问题描述】：

我已经为我的第一个现实世界实施构建了一个基本的通量应用程序。

假设我有一个基本的货币转换应用程序。

当我在下拉菜单中更改金额或货币时，我需要进行 ajax 调用 - 1) 重新获取货币信息，以及 - 2) 重新计算转化率。

我有一个rate store和一个currencyInfo store。

这是我最大的问题： 我如何告诉商店根据各种 UI 片段/其他商店数据的变化重新获取数据？

这些更新也应该按顺序进行，所以 - 1) 更新 UI 状态 - 2) 获取货币信息并更新状态/用户界面 3) 获取转换，进行计算并使用最终数字更新状态/用户界面。

我看到的选项： a）（blech）ViewActionCreator.changeAmount（），changeFromCurrency（），changeToCurrency（），所有API.fetchCurrency（），然后是API.fetchConversion（）并希望ajax调用以正确的顺序返回或尝试找出waitFor b) 让conversionStore 和currencyStore 监听amountStore 的变化，然后重新获取它们自己的数据 C） ？

【问题讨论】：

不确定我是否理解您的问题。但我只能代表我使用的设置。应用程序组件侦听商店，UI 组件可以调用操作。这些操作进行 ajax 调用，然后与存储进行通信（调用更新方法）。然后更新商店，应用程序组件听到它并使用 setState 从商店中提取最新状态，并相应地重新渲染..

【参考方案1】：

我建议您查看通量调度程序中的 waitFor() 方法。它允许您指定商店更新以响应操作的顺序。

Facebook 的聊天应用程序就是一个很好的例子，其中一家商店等待另外两家商店完成更新，然后再更新以响应操作。

https://github.com/facebook/flux/blob/master/examples/flux-chat/js/stores/UnreadThreadStore.js

【讨论】：

接受您的回答，因为链接有帮助。最后选择 Redux，简化了很多这些问题。