How to use async methods inside Redux actions using Redux-Thunk

Gustavo Gonzalez
Aug 30, 2018 · 4 min read
Redux-Thunk Flow

If you are using Redux, probably you noticed that actions only can return plain objects, something like:

If we try to return any other thing like for example a function, the browser will nicely remember it with a message:

Action must be plain object

In the message, Redux is telling us the solution: Use custom middleware for async actions

This article will help us to prevent the error using Redux-Thunk.

First steps

We are going to do an app from scratch so first steps are related to setup the app and add the required packages.

The good stuff

Now we are going to create a component that will list some users. Since we want to show how to use Redux-Thunk we will need:

  • An action: it will fetch the user data
  • A reducer: to put the data in the global state
  • An store: to save the global state
  • A component: to show the data

Lets create the file src/actions/user.js with the following content:

What are we doing there?

Instead of returning a plain object we are returning a function that expects the dispatch method as parameter, the function is asking for some dummy data using service, transform the response to json and then return the plain object action using dispatch. For details about dispatch method, please read the official redux docs

This is a common reducer, I mean, we don't need to change anything to support async actions. Lets create the file src/reducers/user.js with the following content:

Here is where magic happens, in the file src/index.js we should import the following:

and then we should create the store with following code:

What we are doing here, is asking our store to apply a middleware, remember the original message about using custom middleware for async actions?. The middleware in this case is Redux-Thunk that will help us to run async methods in the action.

The code for src/index.js should looks like the following

Finally, we need a component to show the users fetched by redux action, we are going to usesrc/App.js to show the data, it will looks like the following code:

Now we can run the app and see how it shows some user data using async actions in redux.

If you like this story clap as many times as you want, and to see similar stories about technology, check our publications and leave us a comment if you have any question.

If you need a team that can help you to implement your ideas in React JS or React Native, feel free to ping us using our website and filling the contact form.

Twitter: @Aguardientico
Blog in spanish:


IT consulting. #Agile and #Lean remote software development team specialized in #web, #mobile, #reactjs and #rubyonrails from #Ecuador.

Gustavo Gonzalez

Written by

25+ years in software development. Loves to learn new technologies and share his knowledge with others.


IT consulting. #Agile and #Lean remote software development team specialized in #web, #mobile, #reactjs and #rubyonrails from #Ecuador.