React Immer Hooks
Easy immutability in React Hooks with Immer.
Note: React Hooks are currently a RFC proposal which may be subject to change. You'll need at least [email protected] to use this feature.
Installation
yarn add react-immer-hooks
Usage
useImmerState(initialState)
import { useImmerState } from 'react-immer-hooks'
const initialState = {
clicks: 0,
doubleClicks: 0
}
const ClickCounters = () => {
const [ state, setState ] = useImmerState(initialState)
const onClick = () => setState(draft => { draft.clicks++ })
const onDoubleClick = () => setState(draft => { draft.doubleClicks++ })
return (
<>
<button onClick={onClick} onDoubleClick={onDoubleClick}>
Clics: {state.clicks}, Double clicks: {state.doubleClicks}
</button>
</>
)
}useImmerReducer(reducer, initialState)
import { useImmerReducer } from 'react-immer-hooks'
const initialState = {
count: 0
}
const reducer = (draft, action) => {
if (action.type === 'INCREMENT') draft.count++
if (action.type === 'DECREMENT') draft.count--
if (action.type === 'ADD') draft.count += action.payload
}
const Counter = () => {
const [ state, dispatch ] = useImmerReducer(reducer, initialState)
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: 'INCREMENT'})}>
Increment
</button>
<button onClick={() => dispatch({ type: 'DECREMENT'})}>
Decrement
</button>
<button onClick={() => dispatch({ type: 'ADD', payload: 5})}>
Add 5
</button>
</>
)
}License
MIT License