React, React Router and Flux: «отправка в середине отправки», когда я пытаюсь очистить сообщения от магазина

Question

Я использую React, React Router и Flux.

У меня есть MessageStore, который содержит сообщения (ошибки, предупреждения или успеха), что компоненты моего запуска приложения с помощью MessagesAction.addError(), MessagesAction.addWarning() и MessagesAction.addSucess().

Сообщение отправлено, и MessageStore зарегистрирован на Диспетчере, чтобы получить сообщение и сохранить сообщение.

После этого магазин излучает событие, чтобы вызвать методы обратного вызова, прослушивающие новые сообщения. Ничего нового до сих пор.

Моя проблема: мне нужно очистить сообщения от MessageStore при изменении пути (URL).

Моя первая попытка - прослушать изменения маршрута и отправить действие для очистки сообщений. Код:

родовое-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. 

На самом деле, чтобы очистить сообщения, каждый компонент вызывает четкие действия от MessagesAction в своем собственном методе DidMount, что не является хорошим решением.

Я попытался тоже очистить сообщения в моем компоненте сообщений в цикле обновления компонента (после того, как я получаю сообщение и сохранить в государстве):

messages.jsx

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

Я получаю ту же ошибку.

Итак, что такое хорошая практика в React and Flux для этого? Я бы не хотел использовать setTimeout в решении.

Answer 1

У меня был успех с чем-то подобным, я просто поместил это в свой файл маршрутов.

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

Я не уверен, что тот же механизм находится в месте, но когда я пытался добавить обработчик изменений на самом маршруте, собственно, я должен был бы больше проблем, чем я хотел.

Answer 2

Fix rule здесь. Вы не можете испускать другое событие внутри магазина, хранилище должно быть чисто синхронным. поэтому эта строка является проблемой. "EventEmitter.prototype.emit ('EVENT_MESSAGES_UPDATED');"

Так что я предполагаю, что вы пытаетесь достичь что-то вроде этого

1. componentDidMount/Update()

2. Shout "Ясно! (CLEAR)" г-А (магазин сообщений)

3. Сообщение было очищено

4. Пусть Mr.A крикнуть снова к г-ну Б (в другом магазине) «Это было очищено! (EVENT_MESSAGES_UPDATED)»

(Примечание: Shout равно диспетчерское вещь)

Вы могли бы сократить поток в

1. componentDidMount/Update()

2. . Крик «Ясно! (CLEAR)»

3. Have 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;