【问题标题】:How to wait for a dispatch happening in one store from another store如何等待从另一家商店在一家商店发生的调度
【发布时间】:2016-03-04 13:54:04
【问题描述】:

我正在使用来自 Facebook、React、ES6 的 Flux。

我对那些单身商店有不同的问题。然而,反复出现的情况如下。我从一个组件调度一个动作,并且我有两个商店(StoreA、StoreB)监听该动作。

我的两个商店位于两个不同的文件中,并且在每个文件中,我都导出了单例商店实例。两个商店都已经导入到它们的相关容器中(React 组件视图)。我希望 StoreA 等待 StoreB 完成对当前调度的处理,然后再开始 StoreA 中的进程。

我已经阅读了文档,并且有一个 waitFor 方法可以与调度程序的 register 方法返回的令牌一起使用。但是我的两个商店在不同的文件中。找不到从 StoreA 访问 StoreB 的调度令牌的方法...

换句话说:

ReactComp.js

...
handleClick() {
    dispatcher.dispatch({
        type: 'ACTION1'
    });
}

StoreA.js

class StoreA {
    constructor() {
        this.dispatchToken = dispatcher.register((action) => {
            switch(action.type) {
                case 'ACTION1':
                    // do something...
                    break;
            }
        });
    }
}

export default new StoreA();

StoreB.js

class StoreB {
    constructor() {
        dispatcher.register((action) => {
            switch(action.type) {
                case 'ACTION1':
                    dispatcher.waitFor([storeADispatchToken]); //how to get the dispatchToken from Store A... 
                    break;
            }
        });
    }
}

export default new StoreB();

我是 React 和 Flux 架构的新手,如果是这样,答案可能很明显,很抱歉,但是我花了很多时间来寻找答案,但没有成功,我打赌 SO..

【问题讨论】:

    标签: javascript reactjs ecmascript-6 flux


    【解决方案1】:

    将 StoreA 导入到 StoreB 中,您应该可以引用令牌:

    import StoreA from 'path/to/StoreA.js';
    // or if you're not using es6 imports:
    // const StoreA = require('path/to/StoreA.js');
    
    class StoreB {
      constructor() {
        dispatcher.register((action) => {
          switch(action.type) {
            case 'ACTION1':
              dispatcher.waitFor([StoreA.dispatchToken]);
              break;
            }
        });
      }
    }
    
    export default new StoreB();
    

    【讨论】:

    • 对不起,我没有提到这两个商店文件已经导入到它们各自的组件文件中。如果我这样做并且如果我理解正确,我会复制 StoreA 对吗?我最终可能会得到我在组件中使用的前一个实例和我在 StoreB 中导入的实例。两者都将监听相同的操作,这些操作最终可能会导致重复 Ajax 调用和其他逻辑..
    • 如果我正确理解您的担忧,答案是否定的 - 每个商店只有一个实例,因为您要从商店文件导出一个实例,而不是一个类 - export default new StoreA(); - 这是使用new 这是关键。当您import StoreA from 'path/to/StoreA' 时,StoreB 和任何使用 StoreA 的组件都将获得相同的实例。
    • 是的,这是我关心的问题,但我有办法解决吗?对我来说,每个文件有一个商店似乎是合乎逻辑的。但是因为 Flux 是关于单例商店的,所以如果我的商店被导入到不同的文件中,我就无法访问那些调度令牌。我在有效负载中发现了我的自我调度操作,其中包含相关商店的调度令牌。不要认为这是使用 Flux 模式的正确方法。如果我有一个文件,stores.js,我有:文件中某处的 new StoreA() 和 new StoreB() 并执行 export default {storeA: StoreA, storeB: StoreB} 怎么办?顺便说一句,感谢您的帮助!
    • Andrea,认为您误解了我的回答 - 您不需要找到解决方法 - 听起来您误解了导出的工作原理。因为您正在导出一个实例,StoreB 和您的组件都可以在您创建它时导入 StoreA,并且都将获得相同的单个实例,因此无需担心重复的动作侦听器或逻辑,因为该实例只创建一次并且是共享的.
    • 确实,就您直接从组件分派操作的方式而言,您当前的实现并不是很“灵活”——通常的方法不是直接分派组件,而是做所以通过动作创建者 - 看看 Facebook Flux 演示 Github 项目,看看他们如何构建它,以便动作只由动作目录中的模块调度 - github.com/facebook/flux/tree/master/examples/flux-chat/js
    猜你喜欢
    • 2021-11-21
    • 2020-08-18
    • 2016-12-16
    • 2015-09-04
    • 2019-01-07
    • 1970-01-01
    • 1970-01-01
    • 2021-10-21
    • 1970-01-01
    相关资源
    最近更新 更多