通过阅读文档,我不太了解Reflux异步操作是如何工作的。特别是,当异步操作完成时,我需要触发一些东西。
在我的一个组件中,我想侦听异步操作是否完成,然后转换到视图。
mixins: [State, Navigation, Reflux.listenerMixin],
componentDidMount() {
this.listenTo(actions.loadProject.completed, ()=>{this.transitionTo('info')});
},
我创建了这样的动作:
var actions = Reflux.createActions([
"someSyncAction",
"anotherSyncAction"
]);
actions.loadProject = Reflux.createAction({
"loadProject": {children: ['completed','failed']},
});
在我的项目商店里,我有这样的东西:
onLoadProject(id) {
var url = '/api/projects/' + id;
io.socket.get(url, (body, jwr) => {
if(jwr.statusCode !== 200){
console.error('Failed to load project', id, body);
return actions.loadProject.failed();
}
var p = body;
debug('loaded project', id, p);
this.project = p;
this.trigger(p);
actions.loadProject.completed();
});
},
但是actions.loadProject.comcompleted似乎不是一个函数,所以上面的代码不起作用。正确的方法是什么?
我发现我的原始代码由于一个拼写错误和一个错误而无法工作。以下是更正。
mixins: [State, Navigation, Reflux.listenerMixin],
应该是
mixins: [State, Navigation, Reflux.ListenerMixin],
我相信React中已经添加了针对未定义混合的警告,但显然还没有进入我的版本。
actions.loadProject = Reflux.createAction({
"loadProject": {children: ['completed','failed']},
});
应该是
actions.loadProject = Reflux.createAction({children: ['completed','failed']});
我使用了createActions中的语法。这就是loadProject.comcompleted不是函数的原因。反流创造了一个没有明显抱怨的简单动作。
在Tim Arney的示例中,您可以将API调用保存在一个单独的操作侦听器中,并使存储仅侦听已完成的操作。我想我更喜欢使用存储逻辑来保留API调用。如果有人认为有充分的理由不这样做,我很想听听。
我自己是Reflux的新手,下面是我制作的演示。不确定它是否100%正确,但可能会对你有所帮助——http://jsbin.com/roqito/2/edit
来自文档:
// Create async action with `completed` & `failed` children
var makeRequest = Reflux.createAction({ asyncResult: true });