This content originally appeared on DEV Community and was authored by Gilbish
The useReducer hook comes in handy when you want to separate the state logic from the components. In the official doc of React, they have written it as an alternative to useState.
useReducer hook is usually preferable to useState when you have a complex state.
const [state, dispatch] = useReducer(reducer, initialArg, init);
arguments of useReducer:
1) reducer
A reducer will be a function that takes two arguments.
the first argument is the initialState and the second will be the action. It will return the new state based on the action provided.
2) initialArg
initialArg is the initial state which is passed to the reducer.
3) init (optional)
It's a function that is used to create the initial state lazily. If you pass a third function argument to the useReducer hook, it passes the second argument to that function and uses the return value for the initial state.
Example
Let's create a counter app, in which the count will increase or decrease based on the button we click.
Step1 (create the component)
import React from 'react'
const CounterApp = ({initialCount=0,step=1}) => {
const count = initialCount;
const add = () => console.log('add');
const subtract = () => console.log('subtract');
return (
<>
<p>{count}</p>
<button onClick={add}>Add</button>
<button onClick={subtract}>Subtract</button>
</>
)
}
Step2 (create the reducer function)
const countReducer = (state,dispatch) => {
const {type,step} = dispatch;
switch(type){
case 'ADD':{
return state + step
}
case 'SUBTRACt':{
return state - step
}
default:{
return state
}
}
}
here the state is the current state and dispatch (can also be said as action) is the argument that is passed in the setState. We are checking the type of action passed by the user and based on that we will set the new value. It works same as the reducer of Redux.
Step3 (use the Reducer with our component)
import React , {useReducer} from 'react'
const countReducer = (state,dispatch) => {
const {type,step} = dispatch;
switch(type){
case 'ADD':{
return state + step
}
case 'SUBTRACt':{
return state - step
}
default:{
return state
}
}
}
const CounterApp = ({initialCount=0,step=1}) => {
const [count,setCount] = useReducer(countReducer,initialCount);
const add = () => setCount({type:'ADD',step});
const subtract = () => setCount({type:'SUBTRACT',step});
return (
<>
<p>{count}</p>
<button onClick={add}>Add</button>
<button onClick={subtract}>Subtract</button>
</>
)
}
const App = () => {
return <CounterApp />
}
export default App;
Out CounterApp is ready. ?
We have used the useReducer hook for a simple counter app. I will suggest using the useState hook for simple cases and the useReducer hook for complex cases.
One of the examples for the complex case is if you have more than one state in your app and you have to change all the states at the same time, then, in that case, we can save all the states in an object using the useReducer hook.
Thanks for reading my post. ?
Let me know if you have any queries.
This content originally appeared on DEV Community and was authored by Gilbish
Gilbish | Sciencx (2021-04-24T17:36:14+00:00) useReducer Hook for functional components.. Retrieved from https://www.scien.cx/2021/04/24/usereducer-hook-for-functional-components/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.