1

So the error I get is:

Uncaught (in promise) Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.(…)

I've read through countless of posts regarding this error but I can't seem to figure out why I get it. I get the error at pageload, from thereon it works fine. When I remove the loading action: loading: StudentsActions.studentsLoading it all works fine.

You can find all the code on the github repo

Thanks in advance !

Jannes V
  • 67
  • 1
  • 9

2 Answers2

5

You are getting this error because you perform multiple dispatches at the same time. When the page loads, your NavBar component and your StudentList component are both rendered, which invokes componentDidMount on both, and in your case you initiate a dispatch in both places.

You are using a bad flux pattern by having "presentation" components interact with your dispatcher/stores. The correct approach, as pointed out in the flux documentation, is to have a single, top-level component handle dispatches and pass down state to other components via props. In your case, the App component is the only one that should be aware of the stores or that can dispatch actions.

This has many advantages, such as making your entire application far easier to use and refactor since most components don't know or care where the data comes from. It will also prevent the error you're getting. The reason flux does not allow multiple dispatches at the same time is because allowing it would lead to situations where it's unclear why your application is in a particular state. There is no longer a single line of logic that can be followed to determine what your application is doing.

EugeneZ
  • 1,615
  • 11
  • 17
  • Thanks alot. As stated in my repo this is just to learn React and Flux. So I'm learning as I go. – Jannes V Feb 12 '16 at 14:45
  • No prob. When I started with React, I made the same mistake, except it was for a full project... which took a long time to fix. – EugeneZ Feb 12 '16 at 17:05
  • I still can't figure out how to get it to work. I placed all my stores on my App and pass the props through. I can get my years loaded. But whenever I try to load in my students I get the same error. I tried loading it when I received the props, thus the dispatch should have finished. Inside the receivedYears function. like this: `StudentsStore.getStudents(selectedModule.students)` just afther the `setState` – Jannes V Feb 12 '16 at 22:42
  • I'm not seeing updated code on Github, so I can't be sure, but are you getting you calling `StudentsStore.getStudents` from App as well? You should be. It might seem counter-intuitive ("I'm getting the Student info, and this is the Student component, it should be doing this!") but all of your components besides App should be completely unaware of dispatches. Thus, only App knows when its dispatching anything, and you can make sure it only performs one dispatch at a time. If you want to get data from multiple stores at the same time, you want one dispatch that populates multiple stores. – EugeneZ Feb 13 '16 at 07:11
2

you can user the "defer" option in the dispatcher. In your case it would be like:

StudentAction.getStudents.defer(options);
abhisekpaul
  • 497
  • 7
  • 5