What is the sole benefit of redux-thunk?

Question

I am relatively newer to redux. I have gone through a lot of article still i am not getting a clear picture whats the real benefit of using redux-thunk.

All I understood is it allows you to return a function instead of object from action-creators? But what's the benefit? I have created few small react projects without using redux-thunk.

Let's consider the below snippets. Both behaves the same.

It would be great help if someone can explain me or point me to the correct resources to get a better understanding.

With redux-thunk

export function fetchContacts(){
  return function(dispatch){
    axios
      .get('/contacts')
      .then( contacts => dispatch({ type: 'FETCH_CONTACTS', payload: contacts}))
  }
}

Without redux-thunk

const client = axios.create({
  baseURL: "http://localhost:3000",
  headers: {
    "Content-Type": "application/json"
  }
})
const url = '/contacts';
export function fetchContacts(){
  return {
    type: 'FETCH_CONTACTS',
    payload: client.get(url)
  }
}

Possible duplicate of https://stackoverflow.com/questions/34713466/what-are-the-benefits-of-using-thunk-middleware-in-redux-over-using-regular-func — Hemadri Dasari, Jan 22 '18 at 03:18
Possible duplicate of [Why use Redux Thunk](https://stackoverflow.com/questions/47031408/why-use-redux-thunk) — RIYAJ KHAN, Jan 22 '18 at 03:31

score 5 · Accepted Answer · answered Jan 26 '18 at 17:58

The purpose of Redux itself, is to hold our application state. One of the great features of Redux is that we can change our state in a well-defined pattern and it's a pattern that we repeat over and over in our applications.

We call an Action Creator, this produces an Action. The Action flows into our Middleware, then our Reducers which then flows into our application State then into React. Then we sit around and wait for the user to initiate some change inside of our application that repeats the process all over again.

This process works fine with any kind of synchronous change. By synchronous I mean that we call an Action Creator which immediately flows into an Action, Middleware and our Reducers.

The vast majority of web applications we build, however, need to fetch data from asynchronous channels. In other words, its more common to call an Action Creator that is fetching data from an API or some asynchronous action and only when that request resolves are we actually ready to create an Action.

Vanilla Redux is not setup to handle this out of the box.

So, how do we handle these asynchronous Action Creators?

This is where Redux-Thunk comes into play. The purpose of Redux-Thunk is to give us direct control over the Dispatch method. The Dispatch method is part of the ReduxStore that contains our application state.

The Dispatch method handles:
Middleware
Reducers
State

When we normally call an Action Creator and it returns an Action, the Action ends up being returned into this Dispatch method. You have been using the Dispatch method behind-the-scenes in vanilla Redux.

So in practice, say you have a file in actions/index.js:

import axios from 'axios';

export function fetchUsers() {
   const request = axios.get('http://somejsondata.com/users');
}

Redux expects us to return an action, but we do not yet have any data. I have to wait for my request to resolve before I have any data to send across to my Dispatch method.

So, lets use Redux-Thunk where all the existing rules for action creators kind of go out the window. Redux expects for us to return an Action which is a plain JavaScript object.

Redux-Thunk enables one other return type, which is a plain JavaScript function.

import axios from 'axios';

export function fetchUsers() {
   const request = axios.get('http://somejsondata.com/users');

   return () => {

   };
}

The first argument is going to be the dispatch method:

import axios from 'axios';

export function fetchUsers() {
   const request = axios.get('http://somejsondata.com/users');

   return (dispatch) => {

   };
}

If we pass an Action into dispatch, it's going to be sent off to all our different reducers.

export function fetchUsers() {
       const request = axios.get('http://somejsondata.com/users');

       return (dispatch) => {
         request.then(({data}) => {
           dispatch({type: 'FETCH_PROFILES', payload: data})
         });
       };
    }

This is saying, we are going to wait for request to resolve with some amount of data and only when it has will I dispatch an action. In this case, it is going to have type FETCH_PROFILES and payload of data.

Is there any advantage of using redux (actions) with axios to get data over getting just using axios? — Talha Noyon, Jul 17 '20 at 08:32

score 4 · Answer 2 · answered Jan 22 '18 at 03:20

redux-thunk allows you to execute asynchronous operations.

In your first example you are sending the actual data returned by your API endpoint to your reducer. And the action will only be sent after the server has returned the data.

In your second example, you are sending a promise to your reducer which doesn't work as you would have to resolve your promise inside the reducer, which breaks the principle upon which reducers should be pure functions.

score 2 · Answer 3 · answered Jan 22 '18 at 06:01

redux-thunk allows you to delay your actions in order to make async calls before dispatching. lets say you are retrieving user settings. the common use-case is to dispatch a REQUEST_FOR_USER_SETTINGS_IN_PROGRESS action so you can show a loader in your app, then make the http request for the data and when you get a response, dispatch a SUCCESS or ERROR action to update UI. it would look something like this:

const requestToGetCoins = await() => {
return (dispatch) => {
    dispatch(requestToGetUserSettingsInProgress());
    try{
      const users = async httpService.getUserSettings();
      dispatch(requestToGetUserSettingsSuccess(users));
    }
    catch(e){
      dispatch(requestToGetUserSettingsError(e));
    }
};

};

just wanted to emphasise that there is a better way to handle async actions in redux than redux-thunk, using an adhoc middleware which handles async actions and reduces much of the boilerplate. I suggest you take a look at this: https://medium.com/@sht_5/minimal-code-for-redux-async-actions-c47ea85f2141

What is the sole benefit of redux-thunk?

3 Answers3

Linked