useReducer ()
Parameters
useReducer ( reducer, initialArg, init? )
• Function , specifies how the sate (optional)
gets updated. function that runs only
• Take the state and action as Starting point, means once (at the beginning )
argument. ( state and action can be this is what we want to calculate initial state.
of any type). our state to start as.
• Return the next state. function init(initialValue) {
const initialArg = 5 console.log('initializing...’)
function reducer(state, action) {
return initialValue * 2
if (action.type === 'increment’) {
}
return state + 1
} else if (action.type === 'decrement’) { // Now state will start at
return state – 1 10 instead of 5 if initialArg
} else if (action.type === 'reset’) { was 5.
return 0
} else {
return state
}
}
Return
const [count, dispatch] = useReducer(reducer, 0)
useReducer gives you an array with two things:
1.The current state value –
This is the value you're working with.
On the first render:
•If you gave an init function, it uses init(initialArg) to get the starting value.
•If you didn’t give init, it just uses initialArg as the starting value.
In the above example, our state is count (starts at 0).
2.The dispatch function –
This is a function you use when you want to change the state.
You call dispatch({ type: ‘something’ }) to tell React what action to do (like “increase” or “reset”).
When you call it, React updates the state and re-renders the component.
In the above example, dispatch is the function we’ll use to change count.
dispatch function
• We use it to send an action object to the reducer function.
(this object usually has a type and some extra data like a payload)
dispatch({ type: 'set', payload: 10 })
type Payload
• type is like the name of the action. Optional
• It tells the reducer what kind of update • payload is the extra information sent
you want to make. with the action.
• Think of it as a label or instruction like: •We use it when the reducer needs
"increase", "decrease", "reset", etc. some data to update the state.
• That action tells the reducer function what to do (like increase, decrease, etc).
• It does not return anything but causes the state to update and the component to
re-render with the new state.
Example
export default function Counter() {
import React, { useReducer, useEffect } from 'react’
const initialState = { count: 0 }
function reducer(state, action) {
console.log(' Reducer CALLED') const [state, dispatch] = useReducer(reducer, initialState)
console.log(' Previous state:', state)
console.log(' Action received:', action) useEffect(() => {
console.log(' Initial state on mount:', initialState)
let newState }, [])
switch (action.type) { return (
case 'increment': <div>
newState = { count: state.count + 1 } <h2> Count: {state.count}</h2>
break
<button
case 'decrement': onClick={() => {
newState = { count: state.count - 1 } console.log('\n Dispatching: increment')
break dispatch({ type: 'increment' })
}}
case 'reset': >
newState = { count: 0 } Increment
break </button>
case 'set':
newState = { count: action.payload } <button
break onClick={() => {
console.log('\n Dispatching: set to 100 (with payload)')
default: dispatch({ type: 'set', payload: 100 })
console.warn(' Unknown action:', action.type) }}
newState = state >
} Set to 100
</button>
console.log(' New state after action:', newState) </div>
)
return newState }
}
output
Let’s go to our page and first click on increment and then set to 100
Initial state on mount: { count: 0 }
Dispatching: increment
Reducer CALLED
Previous state: { count: 0 }
Action received: { type: 'increment’ }
New state after action: { count: 1 }
Dispatching: set to 100 (with payload)
Reducer CALLED
Previous state: { count: 1 }
Action received: { type: 'set', payload: 100 }
New state after action: { count: 100 }
