Welcome back again!
This is the fifth blog in the React Hook series, where we're learning about different hooks used in React, and today's hook is the useReducer
hook. Before we get started, I'd recommend reading the last blogs of this series React Hooks. Though this hook is entirely independent of we can read and learn it without any prior knowledge of hooks, it would be beneficial to have some basic understanding of the hooks.
What is useReducer Hook
To handle the complex state in our application, we use the useReducer
hook. It is the same as the useState
hook, but instead, it is used to handle the states where we have to keep track of the complex states which rely on the complex logic.
Syntax:
useReducer(reducerFn, initialState )
- reducerFn is the function that contains the logic to handle the manipulation of our state.
- initialState is the initial state value of our state. It is primarily objects while using the
useReducer
.
useReducer
hooks return the two values:
const [ state, dispatch ] = useReducer ( reducerFn, initialState )
- the state is the value of the current state
- dispatch is the method that will be used to call our
reducerFn
.
Understand useReducer by Example
In the following example, we will create a simple app that will display the user's Name and Account Number. We will be using useReducer
for this.
Step 1 => Import the useReducer Hook
Import the useReducer
hook and define it in the component.
import React, { useReducer } from "react";
const UseReducer = () => {
const [userData, dispatchData] = useReducer(userReducer, {
userName: "Please Login!",
userAccount: null
});
};
Here userData
will be our value of the state then, and the initial value of the state will be an object with properties userName
and userAccount
.
dispatchData
will be the method to call the userReducer
function, which we will define in the coming section.
Step 2 => Define userReducer function:
We can define the userReducer
function outside our component since all the values will be passed using the dispatchData
method.
// Reducer function
const userReducer = (state, action) => {
if (action.type === "LOGIN") {
return {
userName: action.data.name,
userAccount: action.data.account
};
}
if (action.type === "LOGGED_OUT") {
return {
userName: "You are logged out!",
userAccount: null
};
}
};
The userReducer
function will take two arguments state and action. state is the value of the state then, and action is used to check for what action which if condition to render, and this type
will be passed by the dispatchData
method that we will define in the coming section.
Step 3 => Add the UI for the Application
We will create the UI for the application that will show the userName
and userAccount
numbers along with two buttons. One of them is to handle the login function and will call the loginHandler
function once clicked, and the other button will handle the logoutHandler
function.
Here is how the code for the UI will look like:
return (
<div className="component">
<p>{userData.userName}</p>
<p>{userData.userAccount}</p>
<div className="btns">
<button onClick={loginHandler}>Login</button>
<button onClick={logoutHandler}>Logout</button>
</div>
</div>
);
Step 4 => Define the loginHandler and logoutHandler functions
loginHandler
and logoutHandler
functions will use the dispatchData
method to pass the object with property type
and user details. The type
will have the value LOGIN
and which we will use in our userReducer
function to call the specific if statement according to the value of the type
.
// Login Handler
const loginHandler = () => {
dispatchData({
type: "LOGIN",
data: {
name: "Hello Vansh Sharma",
account: "Your account number is: 123456"
}
});
};
// Logout Handler
const logoutHandler = () => {
dispatchData({
type: "LOGOUT"
});
};
Combining the above all code snippets in the following codesandbox we get the following application:
Check the
UseReducer.js
to understand more.
When to use useReducer
As you can see the, setting up useReducer
is more lengthy than using the useState
hook; therefore prefer using the useReducer
only if the state of the component depends on the complex function or the state of the component is complicated, like an object with many properties.
That's all for this blog. Continue reading this React hook series to learn more about React hooks. In the next blog, we'll look at the useCallback
hook that can be used to memorize the function.
Feel free to leave your valuable feedback in the comments below.
To learn more about React, JavaScript, and Web development, follow me on :
Reference: W3Schools
Top comments (0)