React Flux - can not dispatch in the middle of a dispatch

Question

I have a dropdown with lists. When a list is clicked, it is displayed in a table on the other side of the page.

Whenever a new list is created, I want to display it just as if it was clicked(as shown in the code below). However, in order to display it in the table, I need to call ListAssignmentsStoreActions.loadListAssignments(list);.

handleClick: function() {
    var list = this.props.data;
    ListAssignmentsStoreActions.loadListAssignments(list);
},

//invoked after initial rendering
componentDidMount: function() {
    var loadAssignmentsForList = this.props.loadAssignmentsForList;
    console.log("Name " + this.props.data.name);
    if(loadAssignmentsForList){
        this.handleClick();
    }
}

The problem is that I get:

 error = Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. at invariant

I don't know how to display the list other than by calling an action.

Hard to tell without the code. It's a dispatch bug, we may need your action file for example... — François Richard, Oct 29 '15 at 16:40

score 4 · Answer 1 · answered Oct 29 '15 at 15:34

I believe you got Flux wrong.

When you select a list in the dropdown you dispatch an Action, say ListSelectedAction which has a property holding the list id.

You should have a Store, say ListStore which registers a listener/callback on the dispatcher, listening for ListSelectedAction. ListStore updates one of its property, say currentList with list id contained in ListSelectedAction and emits an Event, say LIST_CHANGED

The Table component listens for LIST_CHANGED events (not actions) and when receiving it, reads from the ListStore the currentList id. (ListStore is passed as a prop to Table)

In summary, Dropdown -> ListSelectedAction -> ListStore -> LIST_CHANGED -> Table

Same deal with the New Button

New Button -> NewListAction -> ListStore -> List_CHANGED -> Table

React Flux - can not dispatch in the middle of a dispatch

1 Answers1