ReactJS ajax approach

Question

I'm developing a SPA with React and Flux.

Since now I've been following the approach of this article to tackle ajax requests: http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/

Nonetheless, I've found this other reference that uses a completely opposing approach: http://christianalfoni.github.io/javascript/2014/10/22/nailing-that-validation-with-reactjs.html

The first one enforces heavy use of flux in every ajax request and the second one suggest the use of direct request from inside forms.

It is starting to seems to me that the use of flux add some unnecessary complexity to the code if the request could be done from within a component, like a .

Of course if the request had relevant data to multiple pages/components a store should be used to transmit it. But a simple form don't usually have this constraint.

Is there some reason to use flux all around or a mix of this two approaches is "architecturally acceptable"?

Answer 1

The second approach is "wrong". I put that in inverted commas because it clearly works and probably wouldn't get you in much trouble, but it is not fully Flux-like, IMO.

Rather than using Ajax calls in components, it should fire off an action or action creator (depending on your flux implementation) and the request should happen there. This lets you do stuff like updating stores, chaining actions and responding to errors, all in a way that will scale as your app gets bigger.

I think a lot of people over-worry about this kind of thing, and it's really only if you're working on a larger application that it'll become a pain point. But if you want to follow the Flux way, my opinion is that the second approach isn't quite right.