reactjs - 让商店监听另一家商店的变化

Question

我有一个 Flux 应用程序，有 2 个商店:ACCOUNT-STORE 和 CLIENT-STORE。

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

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

现在 FILTER-STORE 监听 SELECT_COUNTRY 并创建过滤器函数，但我找不到制作 ACCOUNT-STORE 和的最佳实践CLIENT-STORE 监听 FILTER-STORE 中的更改并使用react。

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

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

我的计划是让 ACCOUNT-STORE 和 CLIENT-STORE 监听此操作并使用其有效负载。但我遇到了错误消息:

不变违规:Dispatch.dispatch(...):无法在调度中间调度。

那么也许还有另一种方法？是否可以让 ACCOUNT-STORE 和 CLIENT-STORE 监听 FILTER-STORE 就像我的组件监听存储一样？

谢谢

Answer 1

你想要做的事情违背了 Flux 单向数据流架构，解释说 here 。商店不应发出更改供自己监听，而应仅监听组件的操作并对组件发出更改。

如果您想干燥您的过滤器逻辑，您应该创建一个相应的 FilterActionCreator 来处理分派(dispatch) SELECT_ACCOUNT 和其他操作。您可以在这篇广泛的answer中阅读更多相关信息。 .

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