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.
1 | 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. 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.
1 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import React from "react"; function App() { return ( <div className="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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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 className="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.
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
