The Fetch API and asynchronous Redux state

Prerequisites 📍

To enable asynchronous actions on your redux store, you will want to apply the redux-thunk middleware.

What is an asynchronous action? 🐌

The first step is understanding what you are creating — unlike previous action creators that returned an action object that was immediately sent to the reducers, an asynchronous action is not an object but a function that is immediately invoked. That function accepts two parameters, each of which is a function. The first is the dispatch function, used to dispatch an action; the second is a getState function, used to get the current redux state.

The States of the Fetch API 🎌

Now that we know how to create an action that can dispatch multiple states over time, let’s identify and dispatch the states of a fetch request.

The Abort Action 🙅

In order for the API request to notify the developer that it has been cancelled, it must be passed an AbortSignal at instantiation. Despite this not being the first action dispatched, it will be the first we write, because it must be written before the API request is initialized.

The Request Action 📞

You should use the request action to enable a loading view. Consider using a loading animation or text to notify your user that something is happening. The feedback goes a long way in making your application feel responsive. The REQUEST_MY_API action will toggle the state.myApi.loading from false to true. Your components can now respond to this redux state accordingly. Components that depend on the response from my API can display that they are in the process of loading.

The Response Action 🙌

Once the fetch Promise resolves, we can take that response, parse it accordingly (as text or JSON), and send the parsed data to the reducer, making it accessible to your components.

The Error Action ❌

The error action is even easier. Since we’re working with promises, we just catch!

Considerations 🤔

There is more complex error-handling involved if your API is successfully responding with error status codes and an error message as a part of the parsed payload. I won’t cover that case in detail here, because it does not apply to all APIs, but you can see how I handled it in the source code of this package.

Can’t Most of This Be Automated? 🤖

Yes! The fetch-action-creator package does all of the above so that you don’t have to copy-paste this boilerplate for every API action. Every API call will do the same series of things: create an abort controller and signal, fetch the request, parse the response, check the response for error status codes, and dispatch an action for each of the four states involved in the process.

fetch-action-creator 🐶🎾

Be sure to understand the difference between an action and an action creator. The fetch-action-creator package does not return an action creator. It is an action creator, so it returns an asynchronous action, meaning it returns the (dispatch, getState) => {} function.

Conclusion 🔚

If you liked this article, feel free to give it a clap or two. It’s quick, it’s easy, and it’s free! If you have any questions or relevant commentary, please leave them in the comments below.

Senior front end engineer / charlesstover.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store