Most complex hook in react (useReducer)
useReducer is one of the most complex hooks in react. I will discuss this hook in easy words and examples. I will try to explain this hook in 3 parts.
- reducer function in javascript
- what is useReducer hook? where should we use this?
- useReducer and context API
Hopefully, all concepts will be clear about the useReducer hook after these three parts. You can skip any part if you know about the part deeply.
Reducer function in JS: reduce method executes a reducer function and resulting in a single output of value.
reducer function accepts at least two parameters.
i) accumulator call back function ii) Current value
When reduce method calls and reducer is the parameter (line 5), the accumulator value is 0, the current value is 1.
2nd call, the accumulator value is 1 and the current value is 2 and it’s going on.
When reducer and 5 are the parameter (line 9), the accumulator value is 5 and the current value is 1. In 2nd call, the accumulator value is 6 and the current value is 2 and it’s going on.
useReducer Hook: useReducer hook is used for state management. We all know that useState hook is used for state management. But useReducer can be the alternative of useState hook. I will discuss later where should we use useReducer.
Now, Let’s create a counter using useSate and useReducer. Then compare between them.
useReducer hook accepts two parameters i) reducer function and ii) initialState.
Here, I declare initial state is equal to 0. This is like useState(0)`.
“state” manages the value of the state and dispatch triggered the action.
reducer function takes two parameters. i) state and ii) action. reducer function mainly returned a state but this state is dependable on the action. That means the state is changed according to action type. Action type declared on button’s onClick event. dispatch triggered the action and the parameter of dispatch is the type of action. console.log(state, action) can clear this concept.
If we console.log(state,action)`and press the “+” button, we get state current value and type increment.
We can write our required logic in the reducer function according to the action type. Here, case: increment I add 1 with the state value, and case: decrement, I minus 1 with the state value.
This is the main and basic mechanism of useReducer hook.
We can use the initial state as an object.
initialState={
counter: 0
}Even we can pass more value through dispatch.
<button onClick={()=>dispatch({type:"increment", value: 2})}>+</button>We can access this value through action.value .
Context API + useReducer: We can use useReducer with Context API to manage the global state.
Assume that, CounterMain component has a child component Counter3 and the Counter3 component has a child component Counter2. Buttons are in the Counter2 component and reducer logic in the CounterMain component. Now, how can we manage the state? Let’s jump to the code, it will be more clear.
In CounterMain.js file, I declare useReducer hook and create a context API. I pass the dispatch object as context API value.
//Counter3.js
import React from 'react';
import Counter2 from './Counter2';const Counter3 = () => {return (<div><Counter2/></div>);};export default Counter3;
In Counter.js, I use useContext hook and value as usual.
We should use useReducer hook when the initial state will be objects or array. When many states can be changed or components have complex logic, then we can also use useReducer hook instead useState hook.
Github Repo: https://github.com/alaminsahed/react-advance/tree/main/redu
Thank You for reading.
