useReducer in React Hook
Today we will show you how to use useReducer in React Hook. useReducer is a hook that is used for state management in React. The useState is built using the useReducer. So use it when you have a complex state logic that contains multiple sub values.
Syntax
Use the following syntax for useReducer hook.
const [state, dispatch] = useReducer(reducer, initialState);
Generally, the useReducer hook will accept the two parameters such as reducer method and the initial state.
It will return the two arguments in the form of an array" title="Array">Array. The first argument of the array will provide the value of the state variable and the second argument will be the `dispatch` method that is used to update the state.
Example of the useReducer Hook
In this example, we will create a counter example using the useReducer where we will increment and decrement the count value by clicking on the buttons.
1. Create a react application
Here, we will create a startup react application using `create-react-app`. Run the following command to create a react app.
npx create-react-app usereducer-react-hook
2. Design a page in the react component
Let’s design a page in the react component to show the counter value and add the three different buttons called `Increment`, `Decrement`, and `Reset`. On click of the button, we will change the value of the counter.
App.js
import React from "react";
function App() {
return (
<div class="App">
<h3>useReducer in React Hook - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
<span>Counter: {0}</span>
<button>Increment</button>
<button>Decrement</button>
<button>Reset</button>
</div>
);
}
export default App;
3. Use the useReducer hook
Now use the useReducer hook in the example. We will create a separate function to manage the state based on the action that is provided in the argument.
We will use the following function and the state variable.
const initialState = 0;
const reducer = (state, action) => {
switch (action) {
case 'increment':
return state + 1;
case 'decrement':
return state - 1;
case 'reset':
return initialState;
default:
return state;
}
}
Let’s use the above function in the react component.
App.js
import React, { useReducer } from "react";
const initialState = 0;
const reducer = (state, action) => {
switch (action) {
case 'increment':
return state + 1;
case 'decrement':
return state - 1;
case 'reset':
return initialState;
default:
return state;
}
}
function App() {
const [count, dispatch] = useReducer(reducer, initialState);
return (
<div class="App">
<h3>useReducer in React Hook - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
<span>Counter: {count}</span>
<button onclick="{()" ==""> dispatch('increment')}>Increment</button>
<button onclick="{()" ==""> dispatch('decrement')}>Decrement</button>
<button onclick="{()" ==""> dispatch('reset')}>Reset</button>
</div>
);
}
export default App;
4. Output
Run the react application and check the output in the browser.
Output - useReducer in React Hook - Clue Mediator
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
