React，React Router和Flux：当我尝试清除商店中的消息时，“在调度中间调度”

Question

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

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

调度消息并在Dispatcher上注册MessageStore以接收消息并存储消息。

之后，商店发出一个事件来调用回调方法来侦听新消息。 没有什么新的，直到这里。

我的问题是：当路径（URL）发生变化时，我需要清除MessageStore上的消息。

我的第一个尝试是监听路由更改并发送操作以清除消息。 编码：

仿制component.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);

MessagesAction

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

MessagesStore

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中的清除操作，这不是一个好的解决方案。

我也尝试在组件的更新周期中清除消息组件中的消息（在我收到消息并保存在状态后）：

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
});

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

Answer 2

修复规则在这里。 你不能在商店内发出另一个事件，商店应该是纯粹的同步。 所以这一行就是问题所在。 “EventEmitter.prototype.emit（ 'EVENT_MESSAGES_UPDATED'）;”

所以我猜你正在努力实现这样的目标

1. componentDidMount /更新（）

2. 向A先生（消息商店）喊“清楚！（清除）”

3. 消息已被清除

4. 让Mr.A再次向B先生（其他一些商店）喊道“它已被清除！（EVENT_MESSAGES_UPDATED）”

（注：Shout等于调度的东西）

你可以减少流量。

1. componentDidMount /更新（）

2. 喊“清楚！（清除）”

3. 让Mr.A（MessageStore）和Mr.B（SomeOtherStore）都听'CLEAR'并分别做些事情。

所以你的MessageStore将是

case 'CLEAR':
    _messages = [];
    break;

而你的B先生（其他一些原本听过'EVENT_MESSAGES_UPDATED'的商店，让它听'CLEAR'代替

// case 'EVENT_MESSAGES_UPDATED'
case 'CLEAR':
    // Do something you intend to do after EVENT_MESSAGES_UPDATED
    break;