Zustand से State Management
const useStore = create(set => ({
value: initial,
actionName: () => set(state => ({ value: state.value + 1 })),
}));
const value = useStore(state => state.value);
const actionName = useStore(state => state.actionName);एक Zustand Store बनाना
Zustand का create() function एक store एक step में define करता है: आप एक function देते हैं जो set receive करता है (state update करने के लिए) और initial state plus कोई भी update functions return करता है, सब एक plain object में — अलग actions, reducers, या types की ज़रूरत नहीं।
उदाहरण: Creating a Zustand Store
// Run in your local React project (npm install required)
import { create } from 'zustand';
const useCounterStore = create(set => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
}));⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Component में Store उपयोग करना
एक Zustand store बिल्कुल किसी और custom hook जैसे उपयोग होता है। useCounterStore(state => state.count) call करना component को सिर्फ उस field में subscribe करता है, सिर्फ तब re-render करते हुए जब वह बदलती है — कुछ Redux के useSelector जैसी spirit में, लेकिन store hook में ही directly built।
उदाहरण: Using the Store in a Component
// Run in your local React project (npm install required)
function Counter() {
const count = useCounterStore(state => state.count);
const increment = useCounterStore(state => state.increment);
return <button onClick={increment}>Count: {count}</button>;
}Zustand vs. Redux
Zustand Redux के कुछ strict structure (separate actions/reducers/types) को एक बहुत छोटे, ज़्यादा direct API से trade करता है, जो small-to-medium apps के लिए इसे शुरू करना तेज़ बनाता है।
Redux के stricter conventions बहुत बड़ी teams/codebases में ज़्यादा फायदा पहुंचा सकते हैं जहां वह structure consistency में मदद करता है।
उदाहरण: Zustand vs. Redux
// Run in your local React project (npm install required)
// Redux: separate action, reducer, dispatch, Provider, useSelector/useDispatch
// Zustand: one create() call, no Provider, direct hook usage:
const useStore = create(set => ({
user: null,
login: name => set({ user: name }),
}));
function Profile() {
const user = useStore(s => s.user);
return <p>{user || "Not logged in"}</p>;
}- सिर्फ ज़रूरी specific field के बजाय एक component में पूरा store object select करना, extra re-renders का कारण बनते हुए।
- Store के set function के बाहर state को directly mutate करना।
- Module scope पर एक बार define करने के बजाय एक component के अंदर एक नया store instance बनाना।
- Zustand एक minimal state-management library है जिसमें Redux से कहीं कम boilerplate है।
- एक store create() function से बनाया जाता है, state और update functions को साथ define करते हुए।
- Components store hook को एक selector function के साथ call करके store से पढ़ते हैं।
- कोई Provider component ज़रूरी नहीं है — store बस एक hook है जो आप directly import और उपयोग करते हैं।
npm install zustand चाहिए — इस sandbox में CDN से उपलब्ध नहीं है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: