This hook is deprecated and will be removed in a future version. Please create your own version using the recipe. useReducerAtom
Provides a Redux-style reducer pattern for updating atom values.
Import
import { useReducerAtom } from 'jotai/utils'
Signature
function useReducerAtom<Value, Action>(
anAtom: PrimitiveAtom<Value>,
reducer: (v: Value, a?: Action) => Value,
options?: Options
): [Value, (action?: Action) => void]
function useReducerAtom<Value, Action>(
anAtom: PrimitiveAtom<Value>,
reducer: (v: Value, a: Action) => Value,
options?: Options
): [Value, (action: Action) => void]
Parameters
anAtom
PrimitiveAtom<Value>
required
A primitive atom to be used with the reducer.
reducer
(v: Value, a: Action) => Value
required
A reducer function that takes the current value and an action, and returns the new value.
Optional configuration:
store: Specify a custom store to use
Returns
Returns a tuple containing:
- The current value of the atom
- A dispatch function to send actions to the reducer
Type: [Value, (action: Action) => void]
Usage
import { atom } from 'jotai'
import { useReducerAtom } from 'jotai/utils'
type Action =
| { type: 'increment' }
| { type: 'decrement' }
| { type: 'set', value: number }
const countAtom = atom(0)
function reducer(state: number, action: Action) {
switch (action.type) {
case 'increment':
return state + 1
case 'decrement':
return state - 1
case 'set':
return action.value
default:
return state
}
}
function Counter() {
const [count, dispatch] = useReducerAtom(countAtom, reducer)
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
<button onClick={() => dispatch({ type: 'set', value: 0 })}>Reset</button>
</div>
)
}
Alternative (Recommended)
Instead of using the deprecated useReducerAtom, create a custom atom with a reducer:
import { atom, useAtom } from 'jotai'
type Action =
| { type: 'increment' }
| { type: 'decrement' }
| { type: 'set', value: number }
const countAtom = atom(0)
const countReducerAtom = atom(
(get) => get(countAtom),
(get, set, action: Action) => {
const state = get(countAtom)
switch (action.type) {
case 'increment':
set(countAtom, state + 1)
break
case 'decrement':
set(countAtom, state - 1)
break
case 'set':
set(countAtom, action.value)
break
}
}
)
function Counter() {
const [count, dispatch] = useAtom(countReducerAtom)
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
</div>
)
}
- useAtom - Core hook for reading and writing atoms
- atom - Create atoms with custom read/write logic