When to use Flux (etc.) with React?

Question

I've been working on a fairly simple React app as a learning process, and want to begin incorporating Flux (or, more likely, Redux) to continue the education.

The code to implement a Flux-alike solution seems fairly straightforward, but I'm a little unclear on when it's appropriate and how things should be arranged in a best-practice sense.

In ultra layman terms, my best guess at a common use case is that Flux allows components to talk to each other without having common props passed around, so with that in mind, here's an example of something I would hope to use Flux for in my app:

Let's say I have a user profile component which periodically refreshes via an ajax call. While this call is waiting for its data to be returned, a loading spinner gif displays elsewhere on the page - not in a parent or child of the component that fires the ajax call. In this scenario, how would I use Flux to prompt the spinner to display/hide at the appropriate moments (i.e. begin with the request is sent, end when a response is received)? If its visibility were defined by the profile component's state, that's easy, but obviously I need one component to communicate with what I suppose you could call a distant cousin.

How would I lay out my actions, reducers and whatnot to achieve this?

I'm not looking for anyone to write code for me here, as I'll definitely learn that better by doing it, but I'd definitely appreciate some general advice on the methodology to be used in such a situation.

Many thanks!

Answer 1

Redux basically gives you global state that any component can hook into.

So for your ajax call you'd have 3 actions. Check out the Redux docs for creating async actions.

GET_USER_PROFILE_START
GET_USER_PROFILE_SUCCESS
GET_USER_PROFILE_ERROR

Then you'll have reducers for

userProfile
isUserProfileLoading

When you fire your ajax request, your async action will first fire your GET_USER_PROFILE_START action, which will be picked up by your isUserProfileLoading reducer and will set isUserProfileLoading to true.

Then when the request comes back, if it succeeds, it'll fire GET_USER_PROFILE_SUCCESS with a payload of userProfile. Your userProfile reducer will receive userProfile and set it into state.

Your isUserProfileLoading reducer will also be listening for GET_USER_PROFILE_SUCCESS and will set isUserProfileLoading back to false when it sees that action.

If your request fails, you fire a GET_USER_PROFILE_ERROR action with an error payload and do some sort of notification in the UI. And your isUserProfileLoading reducer will also be listening for GET_USER_PROFILE_ERROR and will also set isUserProfileLoading back to false when it sees it.

Now any component in your app, no matter where it is on the page or in the component hierarchy, can look at isUserProfileLoading and render a loading spinner if it's set to true.

Hope that helps.