स्लाइस पैटर्न और DevTools एकीकरण
स्लाइस पैटर्न का उपयोग करके बड़े स्टोर को तार्किक स्लाइस में व्यवस्थित करें और विकास के दौरान समय-यात्रा डीबगिंग के लिए Zustand DevTools मिडलवेयर जोड़ें।
स्लाइस पैटर्न और DevTools एकीकरण, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
स्टोर को स्लाइस में व्यवस्थित क्यों करें?
जैसे-जैसे Zustand स्टोर बढ़ता है, सभी स्थिति और कार्रवाइयों को एक ही वस्तु में रखना संभालना कठिन हो जाता है। स्लाइस पैटर्न स्टोर को कई केंद्रित भागों में बाँटता है, जिनमें से प्रत्येक को अलग फ़ंक्शन के रूप में परिभाषित किया जाता है। सभी स्लाइस एक स्टोर में संयोजित हो जाते हैं, इसलिए घटक अब भी एक ही हुक के माध्यम से हर चीज़ तक पहुँचते हैं। यह Redux Toolkit की स्लाइस अवधारणा के समान है, लेकिन Zustand की न्यूनतम शैली में।
स्लाइस फ़ंक्शन परिभाषित करना
Zustand स्लाइस एक ऐसा फ़ंक्शन है जो set, get और वैकल्पिक रूप से पूरे स्टोर इनिशियलाइज़र को स्वीकार करता है और उस डोमेन की स्थिति तथा कार्रवाइयों वाला ऑब्जेक्ट लौटाता है। प्रत्येक स्लाइस को अपनी फ़ाइल में परिभाषित करें और उन्हें संयुक्त स्टोर में इम्पोर्ट करें। स्लाइस फ़ंक्शन का सिग्नेचर मुख्य स्टोर क्रिएटर के सिग्नेचर से बिल्कुल मेल खाता है।
// slices/counterSlice.ts
import type { StateCreator } from 'zustand';
import type { AppStore } from '../useAppStore';
export interface CounterSlice {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}
export const createCounterSlice: StateCreator<AppStore, [], [], CounterSlice> =
(set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
});स्लाइस को एक स्टोर में संयोजित करना
अपने सभी स्लाइस क्रिएटर फ़ंक्शन इम्पोर्ट करें और स्प्रेड ऑपरेटर का उपयोग करके उन्हें एक ही create कॉल के अंदर मर्ज करें। संयुक्त स्टोर का प्रकार सभी स्लाइस इंटरफ़ेस का इंटरसेक्शन होता है। इसके बाद कंपोनेंट उसी useAppStore हुक के माध्यम से किसी भी स्लाइस की स्थिति और कार्रवाइयों तक पहुँच सकते हैं।
// useAppStore.ts
import { create } from 'zustand';
import { createCounterSlice, CounterSlice } from './slices/counterSlice';
import { createUserSlice, UserSlice } from './slices/userSlice';
export type AppStore = CounterSlice & UserSlice;
export const useAppStore = create<AppStore>((set, get, api) => ({
...createCounterSlice(set, get, api),
...createUserSlice(set, get, api),
}));स्लाइस के बीच संचार
स्लाइस get फ़ंक्शन का उपयोग करके एक-दूसरे की कार्रवाइयाँ चला सकते हैं या एक-दूसरे की स्थिति पढ़ सकते हैं। इसी तरह एक स्लाइस, दूसरे स्लाइस के साथ बहुत अधिक निर्भरता बनाए बिना, उसमें हुए बदलावों पर प्रतिक्रिया दे सकता है। उदाहरण के लिए, कार्ट स्लाइस उपयोगकर्ता स्लाइस का प्रमाणीकरण टोकन पढ़ सकता है और चेकआउट के समय उसे API अनुरोध में शामिल कर सकता है।
export const createCartSlice: StateCreator<AppStore, [], [], CartSlice> =
(set, get) => ({
items: [],
checkout: async () => {
const token = get().user.token; // read from userSlice
await api.checkout(get().items, token);
set({ items: [] });
},
});Zustand DevTools मिडलवेयर क्या है
devtools मिडलवेयर आपके Zustand स्टोर को Redux DevTools ब्राउज़र एक्सटेंशन से जोड़ता है। जुड़ने के बाद आप स्थिति के प्रत्येक स्नैपशॉट का निरीक्षण कर सकते हैं, हर बदलाव को शुरू करने वाली कार्रवाई का नाम देख सकते हैं और किसी भी पिछली स्थिति पर टाइम-ट्रैवल कर सकते हैं। विकास के दौरान जटिल स्थिति-क्रमों की डिबगिंग के लिए यह बेहद उपयोगी है।
DevTools मिडलवेयर जोड़ना
अपने स्टोर क्रिएटर को zustand/middleware से इम्पोर्ट किए गए devtools मिडलवेयर में रैप करें। DevTools पैनल में स्टोर का नाम दिखाने के लिए name प्रॉपर्टी वाला वैकल्पिक कॉन्फ़िगरेशन ऑब्जेक्ट पास करें। प्रोडक्शन बिल्ड में प्रदर्शन पर अतिरिक्त बोझ से बचने के लिए DevTools को केवल विकास के दौरान सक्षम करें।
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
export const useCounterStore = create(
devtools(
(set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
reset: () => set({ count: 0 }),
}),
{ name: 'CounterStore' }
)
);DevTools में कार्रवाइयों को नाम देना
डिफ़ॉल्ट रूप से, DevTools हर स्थिति बदलाव को anonymous नाम देता है। DevTools टाइमलाइन में हर कार्रवाई को अर्थपूर्ण नाम देने के लिए set को तीसरे तर्क के रूप में वर्णनात्मक स्ट्रिंग पास करें। इससे यह पता लगाना बहुत आसान हो जाता है कि किस उपयोगकर्ता इंटरैक्शन के कारण स्थिति में बदलाव हुआ।
increment: () =>
set(
(state) => ({ count: state.count + 1 }),
false, // false = merge (not replace)
'counter/increment' // action label in DevTools
),
reset: () =>
set({ count: 0 }, false, 'counter/reset'),persist को DevTools के साथ संयोजित करना
persist और devtools दोनों का उपयोग करते समय, स्टोर को दोनों मिडलवेयर में रैप करें। क्रम महत्वपूर्ण है: devtools सबसे बाहरी रैपर होना चाहिए, ताकि वह रीहाइड्रेशन सहित स्थिति के सभी बदलावों को देख सके। DevTools टाइमलाइन में रीहाइड्रेशन कार्रवाइयाँ देखने के लिए persist को devtools के अंदर रखें।
import { create } from 'zustand';
import { persist, devtools, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';
export const useSettingsStore = create(
devtools(
persist(
(set) => ({ theme: 'light', setTheme: (t) => set({ theme: t }) }),
{ name: 'settings', storage: createJSONStorage(() => AsyncStorage) }
),
{ name: 'SettingsStore' }
)
);persist और DevTools वाले स्लाइस
बड़े ऐप्स में इन तीनों पैटर्न को मिलाएँ: संगठन के लिए स्लाइस, स्टोरेज के लिए persist और डिबगिंग के लिए devtools। मर्ज किए गए स्लाइस ऑब्जेक्ट को persist और devtools में रैप करें। संयुक्त प्रकार को सभी स्लाइस इंटरफ़ेस के इंटरसेक्शन के रूप में परिभाषित करें, ताकि TypeScript पूरे स्टोर के प्रकारों को सही ढंग से निर्धारित कर सके।
export const useAppStore = create<AppStore>()(
devtools(
persist(
(set, get, api) => ({
...createCounterSlice(set, get, api),
...createUserSlice(set, get, api),
}),
{ name: 'app-store', storage: createJSONStorage(() => AsyncStorage) }
),
{ name: 'AppStore' }
)
);स्लाइस के लिए नामकरण परंपराएँ
बड़े स्टोर में आसानी से नेविगेट करने के लिए नामकरण में एकरूपता रखें। स्लाइस फ़ाइलों का नाम डोमेन के आधार पर रखें, जैसे authSlice.ts और cartSlice.ts; DevTools लेबल में कार्रवाई के नामों के आगे डोमेन लगाएँ, जैसे auth/login और cart/addItem; और प्रत्येक स्लाइस को 100 पंक्तियों से छोटा रखें। यदि कोई स्लाइस असंबंधित ज़िम्मेदारियाँ सँभालने लगे, तो उसे और विभाजित करें।
स्लाइस का उपयोग कब न करें
स्लाइस पैटर्न जटिलता बढ़ाता है। यदि आपके स्टोर में पाँच से कम स्थिति फ़ील्ड और दो या तीन कार्रवाइयाँ हैं, तो उसे एक ही create कॉल में रखें—विभाजित करने का अतिरिक्त बोझ इसके लाभ के योग्य नहीं है। स्लाइस का उपयोग उन स्टोर के लिए करें जो इतने बड़े हो गए हैं कि एक फ़ाइल को समझना कठिन हो गया है, या जहाँ कई डेवलपर एक ही स्टोर की साझा सुविधाओं पर काम करते हैं।
त्वरित जाँच
इस पाठ में React Native Mobile Development की अवधारणाओं के बारे में अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: स्लाइस पैटर्न एक बड़े Zustand स्टोर को केंद्रित डोमेन फ़ंक्शन में विभाजित करता है, जिन्हें एक create कॉल में मर्ज किया जाता है; devtools मिडलवेयर स्थिति के निरीक्षण और टाइम-ट्रैवल के लिए स्टोर को Redux DevTools से जोड़ता है; और set कॉल को नाम देना कार्रवाई के नाम वाली स्ट्रिंग से DevTools टाइमलाइन को अर्थपूर्ण बनाता है। अब हम सीधे AsyncStorage के साथ पढ़ने और लिखने का तरीका सीखेंगे।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “स्लाइस पैटर्न और DevTools एकीकरण” पाठ निःशुल्क है?
हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “स्लाइस पैटर्न और DevTools एकीकरण” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“स्लाइस पैटर्न और DevTools एकीकरण” में मैं क्या सीखूँगा?
स्लाइस पैटर्न का उपयोग करके बड़े स्टोर को तार्किक स्लाइस में व्यवस्थित करें और विकास के दौरान समय-यात्रा डीबगिंग के लिए Zustand DevTools मिडलवेयर जोड़ें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“स्लाइस पैटर्न और DevTools एकीकरण” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Zustand स्टोर बनाना
- कॉम्पोनेंट में स्टोर की स्थिति पढ़ना और अपडेट करना
- AsyncStorage से Zustand स्थिति सुरक्षित रखना
- स्लाइस पैटर्न और DevTools एकीकरण