vendredi 23 juin 2017

Flux with alt - cannot dispatch in the middle of dispatch.- wrong design pattern?

I build an app with pure React. It's primary page shows multiple movies (user added). Users can vote and comment on every movie listed. I have a MovieCard component, which is responsible for single movie. Then in Home I render an array of MovieCard components. Next decided to implement a call to foreign movie database API, to get relevant movie information. I works fine. Then I decided to refactor it in Flux pattern, using Alt and following the guidelines of this tutorial. Everything worked well, until I got the the MovieCard. In there, inside componentDidMount I call the action, which sends ajax and retrieves a poster url. And I got this error.

First, I read this topic. The author of the answer claimed that having each component handles its actions is bad design pattern and is what cause the error. His solution would be to handle ALL actions and stores from the top-most component (App) and pass down as props. My thoughts:

  • I don't like it, because it means passing down a LOT of data and callbacks and my App.js is going to be overly long and ugly and clouded. Lastly I don't know how this is the "React way", where each component is standalone and can work on it's own, out of App context.
  • I don't see how it fixes the problem. I want my MovieCard to fire action to get data inside componentDidMount. So even if App is handling the actions, when multiple movies are shown, then multiple actions will be fired, again.

Then I read this topic. I don't think I am using actions wrong. Here is my action:

getMoviePoster(movieName) {
    TMDB.getMoviePoster(movieName)
        .then(data => this.getMoviePosterSuccess(data))
        .catch(err => this.getMoviePosterFail(err));

    return true;
}

I followed the pattern, showed in the guide I linked above. There were no errors there.

I read through some other topics, there was something about waitFor token, but I couldn't make much of it. Can anyone please shed some light on the issue, because I am in sort of a hurry. I need it done by Tuesday, and I may have a major refactoring on my hands now... I really don't understand what is the problem here. I know Flux is unidirectional, but I thought that's for one component. I'm not guru here, but I can't really see unidirectional flow for the entire application (even this small). I don't see what's the problem of having multiple instances of the same component doing stuff simultaneously.

Aucun commentaire:

Enregistrer un commentaire