3

I realize this question has been asked before and this topic has been widely discussed in the Redux community, but I have not seen it approached by this angle: Error messages.

In most examples using React + Redux + some middleware (redux-promise and redux-thunk), external api calls are done inside the action creator. The result of the API call then affects the application state with a success case or error case.

My counter-argument:

The main interested party in the results of an API call is a component, particularly because it's the one that has to often show an error message to the user. Error messages are best set as component state. It's easier to "clean up" on componentWillMount. No need to create an action just to clean up an application level error state.

All API call's should be made from a component and it should decide what action creator to call. Action creators then become JUST that, functions that return objects. No side-effects in them.

Again, I stress that this "take" is based on the fact that most of the time, a component will need to handle error messages anyways. So why not call the api and deal with the error right there? Things go ok, call an action creator. Things go bad, show an error. Also, I don't think there will be duplication of API calls across the application. After all, React tries to enforce modularization and top-down flow of data. Two different components really shouldn't be calling the same api. They could call the same action creator though and that's fine. Think sign up and sign in. Different api endpoints. Same final state (authenticated: true)

Anyway, this is my view on it. I'm hoping that someone with more experience will answer if API calls inside components are a good idea. Thank you.

EDIT: Just created this post on medium, which hopefully explains my argument better

1
  • "EDIT: Just created this post on medium" -> EDIT: I deleted that post.
    – Khizar
    Mar 20, 2017 at 13:32

1 Answer 1

5

Kind of too open ended to come up with a "solution" but here's a short answer.

First off, what do you mean it's easier to clean up on componentWillMount? Many times api calls are done on an already mounted component like a sign up or login component. The API call happens when the button is clicked, not when it's mounted.

Also, the main reason why API calls are done outside React components (assuming you have a data handling framework like redux) is that the library is used as a View layer. A component renders HTML that declaratively reflects the state of your application. When a login API call fails to authenticate, the application state is what changes, and as a result the View. If you start to handle API responses in your component, you may run into issues with out of sync state.

For example, the user logs in 10 times with the wrong credentials and gets "locked out". How do you handle that error? You'll likely add some logic to handle those errors. And what if other parts of the app need to react to this error? Now you start to fire actions based on those errors and essentially go back to making your API calls entirely from an action creator, which happens to live in your component.

Now, this mostly applies to large applications. It's perfectly reasonable to handle API calls in a component if the application is small enough and state management frameworks like redux just add bloat. If it's a large application, however, I still highly recommend keeping API logic in the action creators.

7
  • 1
    Thanks! What I mean is you can set a null errorMessage state on componentWillMount So every time the component mounts, there will be no error messages to show. Now, I agree that most of the state should be application level state. I also agree that it's best to keep your reducers and action creators separate from components. My case here is simply for making API calls from the component because it will often need to "see" the error. f you use redux-promise, you can still get the error from the comp, but then you need some conditional inside the reducer to decide what to do with the resp.
    – Kavy
    May 6, 2016 at 17:55
  • 1
    If you use redux-thunk, you don't need conditionals inside reducers, but then you can't easily access the result from calling the action creator in a component. Again, I'm all for application level state and Redux. But I think components should call API's and then call action creators (not actions) based on the result. This ensures the caller of an action creator that a specific action WILL be dispatched. No surprises. The way most tutorials show, you call an action creator and only get the possible error as application state. It'll hang there til another action is called.
    – Kavy
    May 6, 2016 at 18:08
  • 1
    Yes, your approach is what I see most often. And I guess you're using redux-thunk? So, taking your approach as an example, let's say the fetch fails, and your action creator will dispatch something like {type: 'FETCH_FAILED', payload: 'Error: 'hey user, try again!'}. How will the component show that error message to the user? Well, it can "read" the error from the application state! Fair enough, but consider this: The user sees the error message, navigates to a different part of the app then navigates back. The error message will still be showing.
    – Kavy
    May 6, 2016 at 19:24
  • 1
    Yes, you can dispatch a new action to clear the error message from the application state, like {type: 'CLEAR_FETCH_ERROR'}. Yes, your component can get the action payload back (especially if you use redux-promise) and set the error on component level. But that's my main point! If I'm going to lengths for this workaround, why not just call the api from the component? I mean this even for large applications because it clarifies the purpose of action creators. They become a solid "returnOneAction" thing rather than "tryThisAndReturnSomeAction" thing. I hope it makes sense.
    – Kavy
    May 6, 2016 at 19:43
  • 1
    Thanks for keeping the conversation going! I'll write something on medium as you suggested!
    – Kavy
    May 6, 2016 at 20:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.