让商店倾听另一家商店的变化

Posted 2023-02-22

【中文标题】让商店倾听另一家商店的变化

【英文标题】：Make stores listen to change in another store

【发布时间】：2015-09-04 00:20:12

【问题描述】：

我有一个带有 2 个商店的 Flux 应用程序：ACCOUNT-STORE 和 CLIENT-STORE。

目前，该应用允许用户针对特定国家/地区进行过滤，并且整个过滤逻辑已在每个商店中实施（因为帐户数据和客户数据都必须按国家/地区过滤）。所以两者都存储： 1- 监听由组件触发的SELECT_COUNTRY 动作 2-创建一个过滤功能，将只保留选定的国家 3-将该功能应用于他们的数据

由于过滤器的数量会增加，我想知道是否可以将步骤 1 和 2 移至仅管理过滤器的第三个商店：FILTER-STORE。

现在FILTER-STORE 收听SELECT_COUNTRY 并创建过滤器功能，但我找不到使ACCOUNT-STORE 和CLIENT-STORE 收听并响应FILTER-STORE 中的更改的最佳做法。

在FILTER-STORE的AppDispatcher.register中，我在创建过滤函数后尝试调用另一个动作：

switch (action.actionType) 
    case AppConstants.SELECT_ACCOUNT:
        updateAccountFilter(action.data);
        AppActions.stfil_selectAccount(
            FilterStore.getAccountFilter()
        );
        break;

我的计划是让ACCOUNT-STORE 和CLIENT-STORE 监听这个动作并使用它的有效载荷。但是我遇到了错误消息：

Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.

所以也许还有另一种方法？是否可以让ACCOUNT-STORE 和CLIENT-STORE 听FILTER-STORE 就像我的组件听商店一样？

谢谢

【问题讨论】：

我建议设置全局事件，如此处所示developer.mozilla.org/en-US/docs/Web/Guide/Events/…，然后在您的 onComponentDidMount 函数中将这些全局事件归因于这些事件。

【参考方案1】：

您尝试做的事情违背了 Flux 单向数据流架构，here 解释道。商店不应该为自己发出变化来监听，应该只监听来自组件的动作并且也发出对组件的变化。

如果您想 DRY 您的过滤器逻辑，您应该创建一个相应的 FilterActionCreator 来处理调度 SELECT_ACCOUNT 和其他操作。您可以在这个广泛的answer 中了解更多信息。

这将使您的逻辑保持干燥并确保您的流程安全。

【讨论】：

非常感谢您的回答。我没有考虑采取行动，因为我认为最好让它们尽可能“干净”。但你是对的，它在这种情况下效果很好。