Welcome Back devs!
We have talked about useReducer hook, its usage, and its implementation in the previous post of this series.
First of all, let us have a recap,
initialState: defines the initial state of the component.
currentState: defines the current state of the component
reducer: reducer() function accepts the currentState and action and then returns a new state based on that action
useReducer hook returns the currentState and the dispatch method.
dispatch: dispatch method is capable of accepting an action to execute the code specified in the render function i.e. it accepts the action and transfers it to the reducer function.
Note: initialization of initialState and reducer() is always made outside the functional component.
Now, in this post, we are going to see another method that can be used to use the useReducer hook.
Let's have look at our reducer,
Reducer function is the same as we have implemented in the first post of usReducer hook
Now, let's see our functional component,
Here, we have implemented two different useReducer hook using the same reducer() function.
This is another way to make use of the useReducer hook.
Let's have a look at the complete code,
So with this, we come to the end of the useReducer hook.
We have seen three different methods to use and implement the useReducer hook.
Feel free to leave a comment if you face any doubt!
- Jayant Khandelwal