我正在尝试了解如何解决商店之间的依赖关系。问题是我有一个全面的数据树,需要从服务器中获取一个依赖于另一个的请求链。
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:
第三步从第二步开始 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(); } });推荐答案
以下是 github/calitek/ReactPatterns React.13 / ReFluxWebSocket。 App.js触发Api.Store与ws.api.js.对象的操作。 然后ws.api.js触发另一个Api.Store响应的操作。 这是一系列动作的例子。
Here is an example from github/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具体事件
发布评论