Async actions handling with redux-thunk

Using redux-thunk to work with asynchronicity

Sharing is caring!

by Max Caluva

03/08/2018

One of the common issues I found when working with Redux is to handle async data correctly, mostly when you want to do in-between steps, e.g. calling a service or transform the data in any way. Here is a short tutorial with simple steps to work with async calls in Redux.

Enter the thunk

First off, what is a thunk?

A thunk is a function that wraps an expression to delay its evaluation.

Now, what does redux-thunk do?

From the creator Dan Abramov’s words:

It allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met.

How do we use redux-thunk?

We need to install it through npm:

npm install redux-thunk

Add –save if you’re not using npm@5

We suppose that you have a redux implementation in your app, so let’s start writing some code directly.

First let’s include redux-thunk into our application, in the store, and add it to the middlewares of it:

The async action creators

Now we are able to start writing our thunks, in the file where we define our actions, I decided to add a new export, remember, this function needs to return a new function that accepts dispatch as a parameter:

I’m going to create an Action Creator that fetches a list of people from a mocked API call, feel free to use your own implementation.

The reducer

As we can see, we end up firing an action with the type FETCH_PEOPLE_HAS_FINISHED, we need to handle that on our reducer:

We also need another reducer for the loading:

Showing async data in the view

Now we can easily use this data on our view to either show a loader while the data is fetching, or something else (Please check at the end of the post for a working example):