What is Redux Thunk?

Redux Thunk is like a reliable assistant for Redux, the manager of your app’s data.
Imagine it as the go-to helper for handling tasks that take some time, such as checking stock in an online store. It ensures your app runs smoothly, managing both quick and more complex actions without slowing down the show.
In this real-life scenario, Redux Thunk allows Redux to smoothly manage the asynchronous task of checking stock without freezing the entire operation.
It’s like having an efficient assistant that can handle both quick tasks and more time-consuming ones, ensuring your online store runs seamlessly.

Example: Suppose you are building a weather app using React and Redux. For this app you want to display the current temperature, but fetching this data from a weather API takes some time.

Without Redux Thunk:

Javascript

// Fist is to Action Creator
const fetchTemperatureRedux = () => {
  // This won't work without Redux Thunk for asynchronous operations
  return {
    type: 'FETCH_TEMPERATURE',
    payload: fetch('https://api.weather.com/current-temperature')
  };
};

With Redux Thunk:

Javascript

// Action Creator using Redux Thunk
const fetchTemperatureRedux = () => {
  return async (dispatch) => {
    // Now you can perform asynchronous operations with Redux Thunk
    try {
    // Let's take one example URL
      const response = await fetch('https://api.weather.com/current-temperature');
      const data = await response.json();
 
      dispatch({
        type: 'FETCH_TEMPERATURE',
        payload: data.temperature
      });
    } catch (error) {
      dispatch({
        type: 'FETCH_ERROR',
        payload: 'Failed to fetch temperature data'
      });
    }
  };
};

In the first example without Redux Thunk, the action creator returns an object, but it won’t handle asynchronous operations like fetching the current temperature.

In the second example with Redux Thunk, the action creator returns a function. This function receives dispatch as an argument, allowing you to perform asynchronous operations (like fetching data) before dispatching the actual action. Redux Thunk enables you to handle real-world scenarios, like fetching data from an API and gracefully dealing with errors.