Question

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

我有一个MessageStore，用于保存我的应用程序组件使用MessagesAction.addError()，MessagesAction.addWarning()和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'）;”

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

componentDidMount /更新（）
向A先生（留言店）喊“清楚！（清除）”
消息已被清除
让Mr.A再次向B先生（其他一些商店）喊道“它已被清除！（EVENT_MESSAGES_UPDATED）”

（注：Shout等于派遣事物）

您可以减少流量。

componentDidMount /更新（）
喊“清除！（清除）”
让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;

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

2 个答案: