Back to articles
Zustand Has a Free State Manager That Replaces Redux — No Boilerplate, No Providers, 1KB

Zustand Has a Free State Manager That Replaces Redux — No Boilerplate, No Providers, 1KB

via Dev.to ReactAlex Spinov

The Redux Problem Redux: create store, create slices, write reducers, dispatch actions, connect with useSelector. 50+ lines of boilerplate for a counter. Zustand is a 1KB state manager. Create a store in 5 lines. Use it anywhere. No Provider wrapper. What Zustand Gives You Create a Store import { create } from ' zustand ' ; interface BearStore { bears : number ; increase : () => void ; decrease : () => void ; reset : () => void ; } const useBearStore = create < BearStore > (( set ) => ({ bears : 0 , increase : () => set (( state ) => ({ bears : state . bears + 1 })), decrease : () => set (( state ) => ({ bears : state . bears - 1 })), reset : () => set ({ bears : 0 }), })); Use It function BearCounter () { const bears = useBearStore (( state ) => state . bears ); return < h1 > { bears } bears </ h1 >; } function Controls () { const increase = useBearStore (( state ) => state . increase ); return < button onClick = { increase } > Add bear </ button >; } No Provider. No Context. Just imp

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
3 views

Related Articles