Latest Code Tutorials

Redux Thunk: How To Use Redux Thunk In React

Redux is a predictable container state management system. It’s a lightweight implementation of Flux, which is another library for managing the state. Redux allows us to put a middleware that sits between an action being dispatched and the action that reaching to the reducers.

Two famous middleware libraries that will allow for side effects and asynchronous activities are Redux Thunk and Redux-Saga.

Redux Thunk Example

Redux Thunk is the middleware that calls the action creators that return a function instead of the action object. That function then receives the store’s dispatch method, which is then used to dispatch the regular synchronous actions inside a body of the function once the asynchronous operations have been completed.

The thunk is a concept in programming where a function is used to delay the evaluation/calculation of an operation.

Let us install React.js using the following command.

Step 1: Install React.js

npx create-react-app reactreduxthunk

Redux Thunk Tutorial With Example From Scratch

Step 2: Install Redux, react-redux, and redux-thunk.

Go inside the folder and type the following command to install the axiosreact-redux, reduxand redux-thunk library.

npm install axios redux react-redux redux-thunk --save

# or

yarn add axios redux react-redux redux-thunk

Step 3: Create an action.

Now, we will fetch the data from Github API, and for that, we need to use Axios: promise-based library to send the network request to a Github API server and fetch the data.

Now, the network request is the best example of an Asynchronous call. The redux-thunk middleware is useful to fetch the data from an API.

Inside the src folder, create three more folders, and their names are following.

  1. actions
  2. reducers
  3. containers

Now, first, inside the actions folder, create one file called types.js and write the following code inside it.

// types.js


When the page loads, we initiate the FETCH_GITHUB_DATA action and fetch all the data from the server and save it inside the Redux store. 

Now, that action returns the object that contains two properties.

  1. Action type
  2. Payload

For our demo, we have two actions, so create one file inside the src >> actions folder called index.js.

Add the following code inside the index.js.

// index.js

import { FETCH_GITHUB_DATA } from './types';
import axios from 'axios';

const apiUrl = '';

export const fetchData = (data) => {
  return {

export const fetchGithubData = () => {
  return (dispatch) => {
    return axios.get(apiUrl)
      .then(response => {
      .catch(error => {

So, here we have defined an action that calls the Github API and responds from the server.

Remember, the reducer is a pure function, and we do not want any asynchronous call inside the reducer; all the asynchronous actions are called inside actions.

Step 4: Create rootReducer and postReducer.

Now, inside the reducers folder, create one file called githubReducer.js.

Write the following code inside the githubReducer.js.

// githubReducer.js

import { FETCH_GITHUB_DATA } from '../actions/types';

export default function githubReducer(state = [], action) {
  switch (action.type) {
      return state;

This githubReducer.js file contains pure functions and does not relate to any backend service. Reducers must be pure functions.

So, if the action type is matched with the fired action, then it will modify the store and change the current state and give that mutated state.

The next step is to create an index.js file inside the reducers folder. Then, write the following code inside it.

// index.js

import { combineReducers } from 'redux';
import data from './githubReducer';

export default combineReducers({
    data: data

Step 5: Configure the redux Store.

Import the src >> reducers >> index.js reducer file inside src >> index.js file, which is already there. So, our final src >> index.js file looks like below.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';

import App from './App';
import rootReducer from './reducers';
import { fetchGithubData } from './actions/index';

const store = createStore(rootReducer, applyMiddleware(thunk));


    <Provider store={store}>
        <App />
    </Provider>, document.getElementById('root'));

Here, we have created the redux store. Also, I imported the createStore, applyMiddleware, thunk.

Since we are dealing with Asynchronous data, we have to use the thunk to save the data inside the Redux store, and then the redux store will update the state and update the React.js User Interface.

First, we have created the redux store and then apply redux-thunk middleware to the store. This middleware helps us to help with Async action inside the store.

After creating the store, we have dispatched the action that fetches all the data from the GitHub server and put it inside the Redux store. So, when we react to app loads for the first time, we get the data.

Step 6: Display the data.

Now, inside the containers folder, create one container component called GithubData.js and write the following code.

// GithubData.js

import React from 'react';
import { connect } from 'react-redux';

function GithubData({ data }) {
  if(!data) {
    return (
        No Data
  return (
        Name: { }
      <br />
        Blog: { }
      <br />
        Github Followers: { data.followers }

const mapStateToProps = state => {
  return {

export default connect(

So, here we have mapped the state data to the properties of this component.

Save this file and go to the terminal and start the react dev server.

npm start

Redux thunk example

Head over to the browser and see the following output.

thunk example in redux

Finally, Redux Thunk Example is over.

  1. Ashs says

    when you do npx create-react-app reactreduxthunk, it keeps on resolving packages with a loading sign but doesnot complete the installation.

  2. Sathiya says

    Hi, Nice explain of redux-thunk. I have doubt in using thunk. For fetching data from api in actions ( api has state as parameter , for instance ‘api/category&${authorId}&${articleName}’ ). In this case like filters how to pass those state change in actions and communicate with UI select? If user select an author from authors List and also select article it has to pass to action creator and fetch data from the api. I wonder how to do it?

  3. Laxman says

    only default App.js file is screen is loaded , not able to view github users data

  4. John Davis says

    Hi! Thanks for your posting.
    My name is John Davis.
    I carried out all things but default App.js file is appeared on the screen.
    what is the reason?

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.