通量：waitfor具体事件 [英] Flux: waitFor specific event

问题描述

我正在尝试了解如何解决商店之间的依赖关系。问题是我有一个全面的数据树，需要从服务器中获取一个依赖于另一个的请求链。

I'm trying to understand how to resolve dependencies among stores. The problem is I have a comprehensive data tree, which need to be fetched from server with the chain of request that depends one on another.

问题： waitFor 接缝不应该用于异步请求。假设下一个事件链：

PROBLEM: waitFor seams not to be supposed for async requests. Suppose next event chain:

1. NEED_A（看看 StoreA ）


2. NEED_B（看看 StoreB ）这里 StoreB do AppDispatcher。 WAITFOR（[StoreA.dispatchToken]）。但实际上我们要等待 GET_A


3. SOME_OTHER_ACTION（看看 StoreA ）

1. NEED_A (look at StoreA)
2. NEED_B (look at StoreB) Here StoreB do AppDispatcher.waitFor([StoreA.dispatchToken]). But actually we want to wait for GET_A
3. SOME_OTHER_ACTION (look at StoreA)

第三步从第二步开始 waitFor ，因为 StoreA.dispatchToken 被调用 SOME_OTHER_ACTION 。

The third step breaks waitFor from the second step since StoreA.dispatchToken was called for SOME_OTHER_ACTION.

问题： 等待某些具体操作的真正方法是什么（ GET_A ）？

我们来看看代码（请注意三个 PROBLEM 注释）：

Let's take a look at the code (please pay attention to three PROBLEM comments):

var a = [];

var StoreA = assign({}, EventEmitter.prototype, {

   getAProps: () => copyOfAProps(a);

   asyncGetA: () => ... //Async request returns Promise
});

StoreA.dispatchToken = AppDispatcher.register((action) => {

  switch(action.type) {
     NEED_A:
       StoreA.asyncGetA().then((data) => {             
         ActionCreator.getA(data); //Dispatches GET_A event
       });
       break;
     GET_A: 
       a = action.data;
       StoreA.emitChange();
     SOME_OTHER_ACTION: 
       //do whatever
  }

});

StoreB

StoreB

var b = [];

var StoreB = assign({}, EventEmitter.prototype, {

   // PROBLEM: this request depends on data fetched from StoreA.asyncGetA
   asyncGetB: (A) => ...
});

StoreB.dispatchToken = AppDispatcher.register((action) => {

  switch(action.type) {
    //PROBLEM: NEED_B may happen before GET_A
    NEED_B:
      //PROBLEM: As I understand waitFor doesn't work here
      AppDispatcher.waitFor([StoreA.dispatchToken]);
      StoreB.asyncGetB(StoreA.getAProps()).then((data) => {
        ActionCreator.getB(data);
      });
    GET_B:
      b = action.data;
      StoreB.emitChange();
  }
});

推荐答案

以下是 https://github.com/calitek/ReactPatterns React.13 / ReFluxWebSocket。
App.js触发Api.Store与ws.api.js.对象的操作。
然后ws.api.js触发另一个Api.Store响应的操作。
这是一系列动作的例子。

Here is an example from https://github.com/calitek/ReactPatterns React.13/ReFluxWebSocket. App.js triggers an action which the Api.Store acts on with ws.api.js. Then ws.api.js triggers another action which Api.Store reacts to. That is an example of a chain of actions.

这是Api.Store.js

This is Api.Store.js

    import Reflux from 'reflux';

    import Actions from './Actions';
    import ApiFct from './../utils/ws.api.js';

    function _apiInit() { ApiFct.init(); }
    function _apiInitDone() { ApiFct.getData(); }
    function _apiSetData(data) { ApiFct.setData(data); }

    var ApiStoreObject = {
        listenables: Actions,
        apiInit: _apiInit,
        apiInitDone: _apiInitDone,
        apiSetData: _apiSetData
    }
    const ApiStore = Reflux.createStore(ApiStoreObject);
    export default ApiStore;

这是ws.api.js

This is ws.api.js

    import Actions from '../flux/Actions';

    module.exports = {
        socket: {},
        init: function() {
            this.socket = new Primus();
            this.socket.on('server:GotData', this.gotData);
            Actions.apiInitDone();
        },
        getData: function() { this.socket.send('client:GetData', {}); },
        gotData: function(data) { Actions.gotData(data); Actions.gotData2(data); },
        setData: function(data) { this.socket.send('client:SetData', data); },
    };

这是Actions.js

This is Actions.js

    import Reflux from 'reflux';

    var apiActions = [
        'apiInit',
        'apiInitDone',
        'apiSetData'
    ]

    var wsActions = [
        'gotData',
        'gotData2'
    ]

    var actionArray = wsActions.concat(apiActions);
    module.exports = Reflux.createActions(actionArray);

这是app.js

    'use strict';

    import React  from 'react';

    import AppCtrl from './components/app.ctrl.js';
    import Actions from './flux/Actions';
    import ApiStore from './flux/Api.Store';

    window.React = React;

    Actions.apiInit();

    React.render( <AppCtrl />, document.getElementById('react') );

这篇关于通量：waitfor具体事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！