Flux - 在 Store 注册之前调度的操作

Posted 2023-02-22

【中文标题】Flux - 在 Store 注册之前调度的操作

【英文标题】：Flux - Actions being dispatched before Store register

【发布时间】：2016-06-13 16:43:14

【问题描述】：

我正在构建一个使用通量作为模式的应用程序。 我试图在进行 API 调用时添加一个加载器（微调器），但它不起作用，我想我错过了一些东西。 流程是这样的： 加载应用程序时，我正在调用 initApp

var InitActions = 
initApp: function()
    FooActions.getFoo();
;
module.exports = InitActions;

FooActions 调度 GET_FOO Action 并调用 APIService.foo.getFooByUser

var FooActions = 

getFoo: function()
    var account = accountStore.getAccountData();
    var accountId = account.id;
    Dispatcher.dispatch(
        actionType: ActionTypes.GET_FOO
    );
   APIService.foo.getFooByUser(accountId);
;
module.exports = FooActions;

APIService 将进行 ajax 调用，并在响应中触发 ServerActions.getFooSuccess 或 ServerActions.getFooFailed 操作

var APIService = 
    foo: 
       getFooByUser : function(accountId)

        var url = apiUrl;
        var params = 
            "accountId":accountId
        ;
       promise.post(url,params)
           .then(function(response)
                ServerActions.getFooSuccess(response);
            )
           .catch(function(response)
                ServerActions.getFooFailed(response);
            );
        
    
; 
module.exports = APIService;

ServerActions 将调度 GET_FOO_SUCCESS 或 GET_FOO_Failed

var ServerActions = 
getFooSuccess: function(response)
    Dispatcher.dispatch(
        actionType: ActionTypes.GET_FOO_SUCCESS,
        foo: response
    );
,

getFooFailed: function(response)
    Dispatcher.dispatch(
        actionType: ActionTypes.GET_FOO_FAILED
    );

而 foo 存储正在通过 dispatcher.register 监听这些事件

var FooStore = assign(, EventEmitter.prototype,...;
Dispatcher.register(function(action)
switch (action.actionType)
    case ActionTypes.GET_FOO:
        _isLoading = true;
        FooStore .emitChange();
        break;
    case ActionTypes.GET_FOO_SUCCESS:
        _isLoading = false;
        _foo = action.foo;
        FooStore .emitChange();
        break;
    case ActionTypes.GET_FOO_FAILED:
        _isLoading = false;
        FooStore.emitChange();
        break;
    default:
    // do nothing
);

现在，基于 _isLoading 参数，我知道何时在我的 foo 组件中显示和隐藏加载程序。由于某种原因，代码永远不会到达 GET_FOO 案例，尽管此操作是在 API 调用之前调度的。 谁能告诉我为什么？

编辑： 当我调试调度程序的代码时，我可以在调度函数中看到循环

Dispatcher.prototype.dispatch = function dispatch(payload) 
    !!this._isDispatching ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.') : invariant(false) : undefined;
    this._startDispatching(payload);
    try 
      for (var id in this._callbacks) 
        if (this._isPending[id]) 
          continue;
        
        this._invokeCallback(id);
      
     finally 
      this._stopDispatching();
    
  ;

我可以看到 FooStore 尚未注册为调度程序回调。 如何确保在触发任何操作之前它已被注册？

【参考方案1】：

已解决： 在我打电话给initApp() 之前，我需要它来确保 FooStore 在任何阳离子之前被注册