React：将更新商店的操作放在 ComponentWillMount 中是一个坏主意吗？

Question

工具：Reactjs 0.14.0、React-Router 1.0.0、Vanilla Flux

所以我将 Action 推送到我的 componentWillMount 中的商店，现在它抛出错误：

“未捕获（承诺）错误：不变违规：Dispatch.dispatch(...)：无法在调度过程中调度”

我所有的调度都应该在拨打这个电话之前几年完成，但是 最后我意识到我的最终 emitChange() 直到显然所有重新渲染 emitChange() 后才会回来。

对于示例代码流程 1-4：

1)我在 InitStore 中更改了 InitComplete 现在为 true 的状态

InitStore.js

case ActionTypes.INIT_COMPLETE:
    _initComplete();
    InitilizationStore.emitChange();
    // Not getting past here till all re-rendering was done
    break;

2)现在这将触发更改渲染

app.js

if(this.state.initComplete) {
    return (
        <Main />
    );
}else{ 
   return (<div className="main-container">Loading...</div>);
}

3)在Main的子组件中会调用保存componentWillMount中的路由参数

Threadlist.js

componentWillMount: function(){
    var { threadID } = this.props.params
    ThreadActionCreators.setCurrentThread(threadID);//Invariant!!!No!!
},

4)但是看起来 InitStore 还没有从emitChange()回来！

问题： 那么我一般不应该更新componentWillMount中的商店吗？

Answer 1

当一个动作同步触发另一个动作时，会出现“无法在调度过程中调度”的情况。操作旨在通知数据更改，所有结果逻辑都由存储处理，无需触发后续进一步操作，因此触发另一个操作的操作可能表明您做错了什么。

但是，在某些情况下，例如您的情况，希望触发进一步的操作以响应新组件的创建或更新是合理的。在这些情况下，您可以通过使第二个操作异步来避免调度错误。最简单的方法是将第二个动作放在 setTimeout 中：

componentWillMount: function(){
    var { threadID } = this.props.params
    window.setTimeout(
        function () {ThreadActionCreators.setCurrentThread(threadID);},
        0
    );
},

或者，如果您愿意，您可以在超时时将调度调用放入 setCurrentThread() 中，两者都应该可以工作。