इस लेख में, हम createWithEqualityFn को मान्य करने के लिए लिखे गए परीक्षण मामले को समझेंगे जो एक शर्त और एक समानता फ़ंक्शन के आधार पर पुन: प्रस्तुत करने से रोकता है जिसे आप पास कर सकते हैं।

नीचे दिया गया कोड basic.test.ts से लिया गया है

it('uses the store with a selector and equality checker', async () => {
  const useBoundStore = createWithEqualityFn(
    () => ({ item: { value: 0 } }),
    Object.is,
  )
  const { setState } = useBoundStore
  let renderCount = 0

  function Component() {
    // Prevent re-render if new value === 1.
    const item = useBoundStore(
      (s) => s.item,
      (_, newItem) => newItem.value === 1,
    )
    return (
      

        renderCount: {  renderCount}, value: {item.value}
      
    )
  }

  const { findByText } = render(
    
      >,
  )

  await findByText('renderCount: 1, value: 0')

  // This will not cause a re-render.
  act(() => setState({ item: { value: 1 } }))
  await findByText('renderCount: 1, value: 0')

  // This will cause a re-render.
  act(() => setState({ item: { value: 2 } }))
  await findByText('renderCount: 2, value: 2')
})

Zustand अपनी परीक्षण आवश्यकताओं के लिए Vitest का उपयोग करता है। आइए उपरोक्त कोड स्निपेट पर गौर करें।

createWithEqualityFn आरंभ करें

const useBoundStore = createWithEqualityFn(
    () => ({ item: { value: 0 } }),
    Object.is,
  )

createWithEqualityFn को राज्य () => ({आइटम: { मान: 0 } } }) के साथ प्रारंभ किया गया है और समानता फ़ंक्शन ऑब्जेक्ट है।

createWithEqualityFn दो वेरिएबल स्वीकार करता है, createState और defaultEqualityFn।

पुनः प्रस्तुत करना रोकें

// Prevent re-render if new value === 1.
    const item = useBoundStore(
      (s) => s.item,
      (_, newItem) => newItem.value === 1,
    )

useBoundStore चयनकर्ता और समानता फ़ंक्शन को स्वीकार करता है जिसका उपयोग मिलान मूल्य के आधार पर पुन: प्रस्तुत करने को रोकने के लिए किया जाता है।

बेसिक.टेस्ट में उपरोक्त उदाहरण का उपयोग मान 1 होने पर पुन: प्रस्तुतीकरण को रोकने के लिए किया जाता है।

await findByText('renderCount: 1, value: 0')

// This will not cause a re-render.
act(() => setState({ item: { value: 1 } }))
await findByText('renderCount: 1, value: 0')

// This will cause a re-render.
act(() => setState({ item: { value: 2 } }))
await findByText('renderCount: 2, value: 2')

ये दावे पुष्टि करते हैं कि राज्य अद्यतन के कारण कोई पुन: प्रस्तुतीकरण नहीं होता है।

हमारे बारे में:

थिंक थ्रू में, हम ओपन-सोर्स परियोजनाओं से प्रेरित सर्वोत्तम प्रथाओं को सिखाने के मिशन पर हैं।

नेक्स्ट.जेएस/रिएक्ट में उन्नत वास्तुशिल्प अवधारणाओं का अभ्यास करके अपने कोडिंग कौशल को 10 गुना करें, सर्वोत्तम प्रथाओं को सीखें और उत्पादन-ग्रेड परियोजनाओं का निर्माण करें।

हम खुले स्रोत हैं - https://github.com/thinkthroo/thinkthroo (हमें एक स्टार अवश्य दें!)

कोडबेस आर्किटेक्चर पर आधारित हमारे उन्नत पाठ्यक्रमों के साथ अपनी टीम को कुशल बनाएं। अधिक जानने के लिए [email protected] पर हमसे संपर्क करें!

संदर्भ:

1. https://github.com/pmndrs/zustand/blob/main/tests/basic.test.tsx#L92

2. https://vitest.dev/guide/