0

I am using Alt library for Flux architecture implementation. I have a component, which displays information about movie. Now I am stuck in a situation where I need to render array of such components under my home page. The problem is that each of these components calls ajax request inside componentDidMount. So when I have more then one - I get: 

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

I wrote a longer post here, this is a more succinct version. I simply cannot understand the nature of the problem.

EDIT: Clarifying with an image. Basically I get the poster for the first component and on the second it throws an error and stops working:

enter image description here

halfer
  • 19,824
  • 17
  • 99
  • 186
Alex
  • 715
  • 1
  • 8
  • 29

1 Answers1

0

After a few days of researching and some help, I got my problem solved.

The simple answer is: You cannot. This is considered not only bad practice, but Flux anti-pattern, an as such is restricted by the standard Facebook dispatcher (which is what Alt uses). The correct way would be to handle actions and stores from the top-most component. You could also use custom dispatcher, but I guess it's not restricted for no reason.

In my case that was the HomePage component and what I did was to fire single action, which got all movie posters and then passed that information down with props.

As far as I understand the best practice would be to have a container component at the top-most, which is only responsible for actions and stores. Then inside the container - a view component (one or more), which are responsible for rendering the UI and data. I find this article well informative.

Alex
  • 715
  • 1
  • 8
  • 29