60d844c635
..to use new zustand/context module from zustand 3.5.0. Also fixed code for merging states on client-side navigation. ## Documentation / Examples - [x] Make sure the linting passes
31 lines
722 B
JavaScript
31 lines
722 B
JavaScript
import { useStore } from '../lib/store'
|
|
import shallow from 'zustand/shallow'
|
|
const useCounter = () => {
|
|
const { count, increment, decrement, reset } = useStore(
|
|
(store) => ({
|
|
count: store.count,
|
|
increment: store.increment,
|
|
decrement: store.decrement,
|
|
reset: store.reset,
|
|
}),
|
|
shallow
|
|
)
|
|
|
|
return { count, increment, decrement, reset }
|
|
}
|
|
|
|
const Counter = () => {
|
|
const { count, increment, decrement, reset } = useCounter()
|
|
return (
|
|
<div>
|
|
<h1>
|
|
Count: <span>{count}</span>
|
|
</h1>
|
|
<button onClick={increment}>+1</button>
|
|
<button onClick={decrement}>-1</button>
|
|
<button onClick={reset}>Reset</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Counter
|