Zustand DevTools और स्टोर का परीक्षण
devtools मिडलवेयर के ज़रिए Redux DevTools से कनेक्ट करें और स्टोर ऐक्शन का सीधे यूनिट परीक्षण करें।
Zustand DevTools और स्टोर का परीक्षण, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
स्वागत है
devtools मिडलवेयर
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
const useStore = create(
devtools(
(set) => ({
count: 0,
increment: () => set(s => ({ count: s.count + 1 }), false, 'increment'),
}),
{ name: 'CounterStore' }
)
);DevTools में नामित क्रियाएँ
set(s => ({ count: s.count + 1 }), false, 'counter/increment');
// Appears as 'counter/increment' in Redux DevToolspersist और devtools को संयोजित करना
const useStore = create(
devtools(
persist(
(set) => ({ /* ... */ }),
{ name: 'my-store' }
),
{ name: 'MyStore' }
)
);Zustand store का परीक्षण
import { useCounterStore } from './store';
beforeEach(() => useCounterStore.setState({ count: 0 }));
test('increment increases count', () => {
useCounterStore.getState().increment();
expect(useCounterStore.getState().count).toBe(1);
});परीक्षणों के बीच स्थिति रीसेट करना
const initialState = { count: 0, user: null };
beforeEach(() => {
useMyStore.setState(initialState);
});घटक परीक्षणों में store का मॉक बनाना
vi.mock('./useCounterStore', () => ({
useCounterStore: vi.fn(() => ({ count: 5, increment: vi.fn() })),
}));असमकालिक क्रियाओं का परीक्षण
global.fetch = vi.fn().mockResolvedValue({
json: () => Promise.resolve({ id: 1, name: 'Alice' }),
});
await useUserStore.getState().fetchUser(1);
expect(useUserStore.getState().user.name).toBe('Alice');प्रोडक्शन DevTools सुरक्षा
const isDev = process.env.NODE_ENV === 'development';
const useStore = create(
isDev ? devtools(storeCreator, { name: 'App' }) : storeCreator
);लॉगिंग मिडलवेयर
const log = (fn) => (set, get, api) => fn(
(args, replace, name) => {
console.log('action', name, args);
set(args, replace, name);
}, get, api
);त्वरित जाँच
पुनरावलोकन
पाठ्यक्रम पूरा हुआ
एआई शिक्षक के साथ React सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 88
- पाठ
- 324
अक्सर पूछे जाने वाले प्रश्न
क्या “Zustand DevTools और स्टोर का परीक्षण” पाठ निःशुल्क है?
हाँ—“Zustand DevTools और स्टोर का परीक्षण” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Zustand DevTools और स्टोर का परीक्षण” में मैं क्या सीखूँगा?
devtools मिडलवेयर के ज़रिए Redux DevTools से कनेक्ट करें और स्टोर ऐक्शन का सीधे यूनिट परीक्षण करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“Zustand DevTools और स्टोर का परीक्षण” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- अपना पहला Zustand स्टोर बनाना
- चयनकर्ता और अनावश्यक री-रेंडर रोकना
- Persist मिडलवेयर से स्टेट को बनाए रखना
- Zustand DevTools और स्टोर का परीक्षण