Understanding The Usereducer Hook in React - DEV Community
Understanding The Usereducer Hook in React - DEV Community
Understanding The Usereducer Hook in React - DEV Community
#react
#javascript
#codenewbie
#webdev
Amarjit Singh ・
10 jul.
2 min read
What is useReducer?
useReducer is one of the additional hooks that shipped with React 16.8 . It is an
alternative to useState hook and helps in managing complex state logic that involves
multiple sub-values or when the next state depends on the previous one. When combined
with useContext and other hooks, it can be a good alternative to redux.
Also, useReducer also lets you optimize performance for components that trigger deep
updates because you can pass dispatch down instead of callbacks.
Now, just like the useState hook, useReducer hook also returns two things in an Array :
the current state value and a dispatch function to which you can pass an action and
invoke later.
o e ate .
The useReducer takes two parameters. The first one is the reducer function and second
is the initialState.
Reducer Function :
A "reducer" is generally a function that accepts two parameters and returns a single value.
A simple example would be the reducer function that we pass to the reduce() method in
JavaScript.
console.log(sum) // 6
case 'INCREMENT':
case 'DECREMENT':
case 'RESET':
default:
The reducer function above takes two parameters, first is the current state and second is
the action which tells us the operation to be performed.
Here, we have used a Switch Statement and based on the value of action.type we
perform the corresponding operation on the state.
Dispatching the action
Now, in order to call the Reducer function to perform an operation on the state we use the
dispatch function.
return (
<div>
Count: {state.count}
</div>
>
);
};
When we call the dispatch function, the current state is automatically passed as the first
argument. Therefore, we only pass the action object, which has the type of action we
want to perform on the state.
Conclusion:
The above example is a basic implementation of useReducer. However, it can be used to
perform complex state logic. In that case, both our state and action objects will be a
collection of many key value pairs.
In my next blog, I will explain on how to use useReducer with useContext for global state
management.
I hope you learnt a lot from this blog. Try implementing what you have learnt in your
projects. If you enjoyed this post, I’d be very grateful if you’d share it. Comment below if
you have any doubts or questions.
Discussion (0)
Code of Conduct
•
Report abuse
Amarjit Singh
WORK
Student
JOINED
6 de jul. de 2021