Setting up Redux-Thunk in create-react-app

In order to add asynchronous behaviour to redux we use a middleware called redux-thunk.
Just like regular action creator in redux return an action object, redux-thunk action creator return a function. And what special about this function?

It has an argument which we use to dispatch actions based on our async work.

So lets see how we can add redux thunk in our react-app.

Step 1: Create a react app. (npx create-react-app reduxthunk)

Step 2: Install required packages: npm install redux react-redux redux-thunk

Step 3: Create a folder name it redux we will put all our files related to redux here. I believe you already have redux code up and running. So let’s directly see what changes we have to do in order to make thunk working.

Step 4: Your existing store may look like this:

import { createStore } from “redux”;`

Now we have to add two things. Import applyMiddleWare from redux and import thunk from redux-thunk. So you code will look like this.

import { createStore, applyMiddleware } from “redux”;

At this point we have added redux thunk in our react app. Now Let’s use async actions.

Step 5: Head back to your action file. And modify it as below.

const getEmployeeData = () => {

VOILA, you’re done. :)

Here is the final app for reference: https://github.com/rahuulmiishra/redux-thunk-example.git

A passionate iOS Developer since 2014.

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