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

Gustavo Gonzalez
Aug 30, 2018 · 4 min read
Image for post
Image for post
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:

Image for post
Image for post
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

The action

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 https://jsonplaceholder.typicode.com/ 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

The reducer

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:

The store

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

The component

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:

That's all folks

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.

Gustavo
Mail: gustavo@alturasoluciones.com
Twitter: @Aguardientico
LinkedIn: www.linkedin.com/in/gustavoagonzalez
Blog in spanish: http://aguardientech.blogspot.com

AlturaSoluciones

IT consulting.

Gustavo Gonzalez

Written by

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

AlturaSoluciones

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.

AlturaSoluciones

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight.
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox.
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month.

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