What is the use of middleware Redux thunk ?
Redux is a state management tool, which is used to store the state of different variables in our react application. It makes complex react applications easier by centralizing the application state. You can learn more about redux here. Redux supports middleware, and middleware functions run between dispatching an action and the moment it reaches the reducer. Redux middlewares can be used for logging, routing, asynchronous actions, etc.
For the scope of this tutorial, we will focus on a redux middleware called thunk. It allows us to return functions instead of objects from redux actions. Plain redux doesn’t allow complex logic inside action functions, you can only perform simple synchronous updates by dispatching actions. This middleware extends its ability and lets you write complex logic that interacts with the store. Thunk doesn’t interfere with the action until it returns a function. Thunk allows us to dispatch actions manually, which gives us the power to incorporate some logic or run some asynchronous code before dispatching an action. The function returned from action is called a thunk function which is called with two arguments :
1. dispatch: It is a method used to dispatch actions, that can be received by reducers.
2. getState: It gives access to store inside the thunk function.
A thunk function may contain any arbitrary logic, sync, or async, and can call dispatch or getState at any time. Before moving any further let’s understand the difference between the flow of redux with and without thunk.
Redux flow without thunk :
Redux Flow with Thunk:
Setup of Redux with Thunk:
Step 1: To set up redux with thunk, we will start by creating a react application, and install all the required dependencies. Run the following command to create a new react application.
npx create-react-app myapp
Step 2: Open your project in a code editor and install all the required packages: redux, react-redux & redux-thunk.
npm install redux react-redux redux-thunk
Now, create two files inside the root directory: actions.js & reducers.js.
Following is the updated project structure:
Now we’ll create some actions and reducers to interact with the store based on those actions.
We’ll create two actions, deleteData is a normal action creator, it doesn’t include any complex or async logic hence thunk will not interfere in its execution. The addData action creator contains async logic, hence we return a function (thunk function) that calls dispatch when data is fetched from the API. (For this tutorial we are using JSONPlaceholderAPI you can learn more about it here.) Then in the app.js file we add buttons to dispatch the actions and display the fetched data.
Here we’ll create reducers to update the state based on those actions, and export the reducers to create a state.
We will first cleanup some boilerplate code and then create a store with middleware thunk. Provider function centralizes the state in our whole application.
We begin by importing all of the actions & hooks, then use the useDispatch hook to dispatch actions and the useSelector hook to access data in the store. We’ve added two buttons to call the handler functions handleAddData and handleDeleteData, which dispatch their respective actions.