reactjs - React、React Router 和 Flux : “dispatch in the middle of a dispatch” when I try to clear the messages on store

Question

我正在使用 React、React Router 和 Flux。

我有一个 MessageStore，它保存我的应用程序的组件使用 MessagesAction.addError()、MessagesAction 触发的消息(错误、警告或成功) .addWarning() 和 MessagesAction.addSucess()。

消息被发送，MessageStore在Dispatcher上注册，接收消息并存储消息。

之后，商店发出一个事件来调用监听新消息的回调方法。在此之前没有任何新内容。

我的问题是:当路径 (URL) 更改时，我需要清除 MessageStore 上的消息。

我的第一个尝试是监听路由变化并发送一个 Action 来清除消息。代码:

通用组件.jsx

onClickButton: updateGenericInformation() {
    GenericAction.updateInformation(this.state.information);
},

componentDidMount: function() {
    //listening for the update in GenericStore.
    GenericStore.addChangeListener(this.changeRoute);
}

changeRoute: function () {
    this.history.pushState(null, '/my-page');
},

routes.jsx

clearMessages: function() {
    MessagesAction.clear();
},

ReactDOM.render(<Router onUpdate={this.clearMessages}>{routes}</Router>, appElement);

消息操作

clear: function() {
    Dispatcher.dispatch({ // error happen here...
        actionType: 'CLEAR'
    });
}

消息存储

case 'CLEAR':
    _messages = [];
    EventEmitter.prototype.emit('EVENT_MESSAGES_UPDATED');
    break;

错误:

flux.js:41 Uncaught Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.

实际上，为了清除消息，每个组件都在自己的DidMount方法中调用MessagesAction中的清除 Action ，这不是一个好的解决方案。

我也尝试在组件的更新周期中清除我的消息组件中的消息(在我收到消息并保存在状态之后):

messages.jsx

componentDidUpdate function() {
    if (this.state.messages) {
         MessagesAction.clear();
    }
}

我收到同样的错误。

那么，在 React 和 Flux 中执行此操作的最佳实践是什么？我不想在解决方案中使用 setTimeout。

Answer 1

我已经成功地完成了类似的事情，我只是把它放在我的路由文件中。

browserHistory.listen(location => {
    // fire your action here to clear the state you need
});

我不确定相同的机制是否到位，但是当我尝试在路由本身上添加更改处理程序时，正确的，我会遇到比我想要的更多的问题。