Redux Thunk

Introduction

Redux is a popular and open-source Javascript library primarily aimed to cover the management measure states of the application. It is also commonly used to develop user interactive interfaces with React or Angular.

Additionally, it is quite absolute to know that the actions of Redux are dispatched asynchronously. It is quite a problem for non-trivial applications that need connection with Application Program Interface or API to perform external effects side by side. Redux can also be considered as a middleware that deals with dispatching and reaching between actions and reducers. Since Redux's actions are asynchronously dispatched, two middleware libraries serve the purpose. They are Redux-Saga and Redux Thunk. Here, we will discuss Redux Thunk.

What is Redux Thunk?

Thunk is a logical concept in programming where you deal with a function that is primarily used to delay the calculation or evaluation of any operation.

Redux Thunk acts as a middleware that will return you a function instead of an object while calling through the action creators. The returned function receives the dispatch method from the store and then later it is used to dispatch synchronously inside the body of function once the asynchronous actions have been completed. Let's move ahead with Redux Thunk and talk more about its installation and usage.

Installation

Before setting up Redux Thunk, we need to set up the dependencies since it works collectively for both the client-side and the server-side. You might need to have node or yarn pre-installed on your system. Run the following command shown below.

Once you start your yarn or node server, now is the right time to set up the middleware. As Redux Thunk is a middleware that resides between action and reducers and can change how states behave. In your index.js file, we need to add a store using the composing method. Type the following command as shown below.

import { applyMiddleware, compose }
from "redux";
import thunk from "redux-thunk";
[...]
const store = createStore(
	rootReducer,
	compose(
		applyMiddleware(thunk),
		devtools
	)
);

Or if you want to add a design component in our React application, we can use Redux Thunk to set up middleware. To do this, we have modified the above code by including the HTML and CSS components as shown.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import './index.css';
import rootReducer from './reducers';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

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

Now, Redux thunk is imported and applied to your application.

Usage of Redux Thunk in Sample Application.

The main objective of using Redux Thunk is to establish asynchronous communication from the externally present API into fetching and saving data. It makes it easier to dispatch actions that follow the paradigm of the whole lifecycle of requests from the externally present API.

For instance, consider we are creating a Tick Tack Toe game. It might involve dispatching an action before we start creating it. If it is successfully created, we also need to dispatch another action since the game involves multiple steps. In case an error hops in, we might keep the details saved on the server and this can be done by making another action for error and dispatch it instead in your container component. Consider the below example code for the game.

import { connect } from 'react-redux';
import { addTodo } from '../actions';
Import NewTickTackToe from '../components/NewTickTackToe';

const DispatchToProps = dispatch => {
  return {
    onAddTickTackToe: ticktacktoe => {
      dispatch(addTickTackToe(ticktacktoe));
    }
  };
};

export default connect(
  null,
  DispatchToProps
)
(NewTickTackToe);

In the above code snippets, we saw how the addTickTackToe action creator returns a function instead of returning a regular object. This function receives the dispatch method directly from the store. If we observe inside the function body, the first dispatch makes an immediate synchronous action and this action indicates that you started saving your data to the external API. If we receive a response from the server, it marks the action as successful because the data might have received from the response. Yet, we again dispatch different synchronous actions if it fails with an error message.

One more example can be taken into account of using Redux Thunk while starting to dispatch actions synchronously. Consider an increment counter where we are applying the middleware as shown below.

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
    
      dispatch(increment());
    }, 1000);
  };
}

Note: The dispatch action can be used along with the increment function defined above along with time constraints. We have taken 1000 milliseconds as the default time interval. Also, the dispatch function is invoked using sync or async actions.

Summary

In this article, we came across the fundamentals of what is Redux and Redux Thunk. We also came across various methods of synchronously setting up actions and Redux Thunk acting as middleware in establishing them. It is important to keep in mind that Redux allows you to synchronously dispatch actions in our React application while creating and utilizing store and depending on the external API for close call integration of data.

Next TopicTrigonometry MCQ

← prev next →