Javascript Flux—在存储寄存器之前调度的操作
我正在构建一个以通量为模式的react应用程序。 我试图在进行API调用时添加一个加载器(微调器),但它不起作用,我想我遗漏了一些东西。 流程如下所示: 当应用程序加载时,我会调用initAppJavascript Flux—在存储寄存器之前调度的操作,javascript,ajax,reactjs,flux,reactjs-flux,Javascript,Ajax,Reactjs,Flux,Reactjs Flux,我正在构建一个以通量为模式的react应用程序。 我试图在进行API调用时添加一个加载器(微调器),但它不起作用,我想我遗漏了一些东西。 流程如下所示: 当应用程序加载时,我会调用initApp var InitActions = { initApp: function(){ FooActions.getFoo(); }}; module.exports = InitActions; FooActions调度GET\u FOO操作并调用APIService.FOO.getFooByUs
var InitActions = {
initApp: function(){
FooActions.getFoo();
}};
module.exports = InitActions;
FooActions调度GET\u FOO操作并调用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\u FOO\u SUCCESS或GET\u FOO\u 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组件中显示和隐藏loader。由于某些原因,代码从未到达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尚未注册为dispatcher回调。
在触发任何操作之前,如何确保它已注册 已解决:
我在调用initApp()