Redux Thunk Overview

Redux Thunk Overview

What is Redux Thunk Adding Redux Thunk Middleware to a React-Redux App Fetch async data using Redux Thunk example

Fetch async data using Redux Thunk example

In the previous post we saw about setting up Redux Thunk for a React Redux application, in this post we shall see an example for fetching async data from an API call using axios and redux thunk, and update the store with the response from the API call.

Assuming that we have the required npm packages installed and the redux-thunk middleware configuration is setup as specified in the previous post we will go ahead with the actual implementation of redux-thunk and axios api calls.

We create 2 actions, first to set the locations array in the store and the 2^nd to set a success/failure message.

Adding Redux Thunk Middleware to a React-Redux App

In the previous post we saw about Redux Thunk middleware and its need, in this post we shall see on how to setup the redux-thunk middleware in a React Redux application. Assuming that we have a working React Redux application we shall see on how to add redux-thunk middleware to it.

To start with we need to install the redux-thunk middleware npm package.

npm install --save redux-thunk

Next we need to add the middleware in the createStore method as follows.