React Academy · पाठ

Zustand DevTools और स्टोर का परीक्षण

devtools मिडलवेयर के ज़रिए Redux DevTools से कनेक्ट करें और स्टोर ऐक्शन का सीधे यूनिट परीक्षण करें।

पाठ 4, कुल 4 में से13 चरण

Zustand DevTools और स्टोर का परीक्षण, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्वागत है

इस पाठ में आप समय-यात्रा डीबगिंग के लिए Zustand store को Redux DevTools से जोड़ेंगे और सीधे store क्रियाओं के लिए इकाई परीक्षण लिखेंगे।

devtools मिडलवेयर

अपने store को devtools मिडलवेयर से लपेटकर उसे Redux DevTools ब्राउज़र एक्सटेंशन से जोड़ें। इसके बाद आप 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() के तीसरे तर्क के रूप में क्रिया का नाम पास करें, जब devtools का उपयोग कर रहे हों। यह लेबल DevTools टाइमलाइन में दिखाई देता है और बदलाव का पता लगाना आसान बनाता है।
set(s => ({ count: s.count + 1 }), false, 'counter/increment');
// Appears as 'counter/increment' in Redux DevTools

persist और devtools को संयोजित करना

कई मिडलवेयर को श्रृंखला में जोड़ें। persist के भीतर devtools को लपेटें, ताकि storage से स्थिति फिर से हाइड्रेट होने सहित सभी स्थिति बदलाव दिखाई दें।
const useStore = create(
  devtools(
    persist(
      (set) => ({ /* ... */ }),
      { name: 'my-store' }
    ),
    { name: 'MyStore' }
  )
);

Zustand store का परीक्षण

Zustand store साधारण JavaScript होती हैं। आप किसी React घटक को रेंडर किए बिना सीधे उनका परीक्षण कर सकते हैं। store इंपोर्ट करें और अपने परीक्षणों में getState() तथा setState() कॉल करें।
import { useCounterStore } from './store';

beforeEach(() => useCounterStore.setState({ count: 0 }));

test('increment increases count', () => {
  useCounterStore.getState().increment();
  expect(useCounterStore.getState().count).toBe(1);
});

परीक्षणों के बीच स्थिति रीसेट करना

परीक्षणों के बीच store को रीसेट करने के लिए beforeEach में प्रारंभिक मानों के साथ setState कॉल करें। इससे परीक्षण मामलों के बीच स्थिति का रिसाव रुकता है।
const initialState = { count: 0, user: null };

beforeEach(() => {
  useMyStore.setState(initialState);
});

घटक परीक्षणों में store का मॉक बनाना

घटक परीक्षणों के लिए store हुक का मॉक बनाकर नियंत्रित मान लौटाएँ। इससे आप वास्तविक store तर्क के बिना विभिन्न store स्थितियों में घटक के रेंडर होने का परीक्षण कर सकते हैं।
vi.mock('./useCounterStore', () => ({
  useCounterStore: vi.fn(() => ({ count: 5, increment: vi.fn() })),
}));

असमकालिक क्रियाओं का परीक्षण

अपने परीक्षण में fetch का मॉक बनाएँ और getState() के माध्यम से असमकालिक क्रिया कॉल करें। await के साथ असमकालिक संचालन के पूरा होने की प्रतीक्षा करें और फिर अपडेट की गई स्थिति पर अभिकथन करें।
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 सुरक्षा

मिडलवेयर को सशर्त रूप से लागू करके प्रोडक्शन में devtools को अक्षम करें। इससे उपयोगकर्ताओं के सामने आपकी store संरचना उजागर नहीं होगी।
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
);

त्वरित जाँच

परीक्षणों के बीच Zustand store को उसकी प्रारंभिक स्थिति पर कैसे रीसेट करेंगे?

पुनरावलोकन

पठनीय DevTools टाइमलाइन के लिए devtools मिडलवेयर जोड़ें और अपनी क्रियाओं के नाम रखें। घटकों को रेंडर किए बिना getState()/setState() से सीधे store का परीक्षण करें। परीक्षणों को अलग रखने के लिए beforeEach में स्थिति रीसेट करें।

पाठ्यक्रम पूरा हुआ

बधाई हो! आपने **Zustand के साथ स्थिति प्रबंधन** पूरा कर लिया है। अब आप store बना सकते हैं, चयनकर्ताओं का उपयोग कर सकते हैं, स्थिति को स्थायी बना सकते हैं, DevTools से डीबग कर सकते हैं और अपने store तर्क के लिए इकाई परीक्षण लिख सकते हैं।
शुरुआत निःशुल्क

एआई शिक्षक के साथ 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 पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. अपना पहला Zustand स्टोर बनाना
  2. चयनकर्ता और अनावश्यक री-रेंडर रोकना
  3. Persist मिडलवेयर से स्टेट को बनाए रखना
  4. Zustand DevTools और स्टोर का परीक्षण
← React Academy पर वापस जाएँ