Zustand
State olvasása és módosítása
Selectorok, actionök meghívása, useShallow több mezőhöz, és getState/setState React-en kívül.
State olvasása és módosítása
State olvasása selectorral
function Counter() {
const count = useCounterStore((state) => state.count)
return <p>Aktuális érték: {count}</p>
}Action meghívása
function CounterButtons() {
const increment = useCounterStore((state) => state.increment)
const decrement = useCounterStore((state) => state.decrement)
const reset = useCounterStore((state) => state.reset)
return (
<div>
<button onClick={decrement}>–</button>
<button onClick={increment}>+</button>
<button onClick={reset}>Reset</button>
</div>
)
}Több mező egyszerre – useShallow
import { useShallow } from "zustand/react/shallow"
function CounterDisplay() {
const { count, reset } = useCounterStore(
useShallow((state) => ({ count: state.count, reset: state.reset }))
)
return (
<div>
<p>{count}</p>
<button onClick={reset}>Reset</button>
</div>
)
}React-en kívüli elérés
const count = useCounterStore.getState().count
useCounterStore.setState({ count: 10 })