Zustand रिएक्ट के लिए एक छोटी, तेज़ और स्केलेबल राज्य-प्रबंधन लाइब्रेरी है, जो Redux जैसे अधिक जटिल समाधानों के विकल्प के रूप में कार्य करती है। Redux की तुलना में Zustand को इतना अधिक आकर्षण प्राप्त होने का मुख्य कारण इसका छोटा आकार और सरल वाक्यविन्यास है।

जस्टैंड सेटअप को समझें

सबसे पहले, आपको ज़स्टैंड और टाइपस्क्रिप्ट इंस्टॉल करना होगा यदि आपने पहले से नहीं किया है।

npm install zustand
'or'
yarn add zustand

Zustand आपके स्टोर को परिभाषित करने के लिए एक क्रिएट फ़ंक्शन प्रदान करता है। आइए एक बुनियादी उदाहरण पर चलते हैं जहां हम एक गिनती मूल्य को संग्रहीत और हेरफेर करते हैं।

आइए store.ts नाम से एक फ़ाइल बनाएं जहां हमारे पास एक कस्टम हुक है useCounterStore():

import { create } from "zustand"

type CounterStore = {
    count: number
    increment: () => void
    resetCount: () => void
}

export const useCounterStore = create((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count   1 })),
    resetCount: () => set({ count: 0 })
}))

इस उदाहरण में:

• गिनती राज्य का एक टुकड़ा है।

• increaseCount और रीसेटकाउंट ऐसी क्रियाएं हैं जो स्थिति को संशोधित करती हैं।

• सेट स्टोर को अपडेट करने के लिए ज़स्टैंड द्वारा प्रदान किया गया एक फ़ंक्शन है।

रिएक्ट कंपोनेंट में स्टोर का उपयोग करना

import React from 'react'
import { useCounterStore } from './store'

const Counter: React.FC = () => {
  const count = useCounterStore((state) => state.count) // Get count from the store
  const increment = useCounterStore((state) => state.increment) // Get the action

  return (
    

      
{count}
      Increase Count
    
  )
}

export default Counter;

यहाँ, काउंटर एक प्रतिक्रिया घटक है। जैसा कि आप देख सकते हैं, useCounterState() का उपयोग गिनती और वेतन वृद्धि तक पहुंचने के लिए किया जाता है।

आप राज्य को सीधे प्राप्त करने के बजाय उसे नष्ट कर सकते हैं जैसा कि निम्नलिखित में है:

const {count, increment} = useCounterStore((state) => state)

लेकिन यह दृष्टिकोण इसे कम प्रदर्शन वाला बनाता है। इसलिए, सबसे अच्छा अभ्यास सीधे राज्य तक पहुंच प्राप्त करना है जैसा कि पहले दिखाया गया है।

अतुल्यकालिक क्रियाएँ

अतुल्यकालिक कार्रवाई करना या सर्वर पर एपीआई अनुरोध को कॉल करना भी ज़स्टैंड में बहुत सरल है। यहां, निम्नलिखित कोड यह सब समझाता है:

export const useCounterStore = create((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count   1 })),
    incrementAsync: async () => {
        await new Promise((resolve) => setTimeout(resolve, 1000))
        set((state) => ({ count: state.count   1 }))
    },
    resetCount: () => set({ count: 0 })
}))

क्या यह जावास्क्रिप्ट में एक सामान्य एसिंक फ़ंक्शन जैसा प्रतीत नहीं होता है? सबसे पहले यह एसिंक्रोनस कोड चलाता है और फिर दिए गए मान के साथ स्थिति सेट करता है।

अब, आइए देखें कि आप इसे प्रतिक्रिया घटक पर कैसे उपयोग कर सकते हैं:

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)

  return (
    

      {count}
      

        Increment
      
    
  )
}

रिएक्ट कंपोनेंट के बाहर की स्थिति तक कैसे पहुंचें

अब तक, आपने केवल रिएक्ट घटकों के अंदर की स्थिति तक पहुंच प्राप्त की है। लेकिन रिएक्ट घटकों के बाहर से राज्य तक पहुँचने के बारे में क्या? हां, Zustand के साथ आप बाहरी रिएक्ट घटकों से राज्य तक पहुंच सकते हैं।

const getCount = () => {
  const count = useCounterStore.getState().count
  console.log("count", count)
}

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)
  const decrement = useCounterStore((state) => state.decrement)

  useEffect(() => {
    getCount()
  }, [])

  return (
    

      {count}
      

        Increment
        Decrement
      
    
  )
}

यहां, आप देख सकते हैं कि getCount() getState() द्वारा राज्य तक पहुंच रहा है

हम गिनती भी निर्धारित कर सकते हैं:

const setCount = () => {
  useCounterStore.setState({ count: 10 })
}

मिडलवेयर जारी रखें

Zustand में पर्सिस्ट मिडलवेयर का उपयोग ब्राउज़र सत्रों में स्थिति को बनाए रखने और रीहाइड्रेट करने के लिए किया जाता है, आमतौर पर localStorage या sessionStorage का उपयोग करते हुए। यह सुविधा आपको पृष्ठ पुनः लोड होने के बाद या उपयोगकर्ता द्वारा ब्राउज़र बंद करने और फिर से खोलने पर भी स्थिति बनाए रखने की अनुमति देती है। यह कैसे काम करता है और इसका उपयोग कैसे करना है, इसका विस्तृत विवरण यहां दिया गया है।

निरंतरता का मूल उपयोग

पर्सिस्ट के साथ ज़स्टैंड स्टोर कैसे स्थापित करें, यहां बताया गया है:

import create from 'zustand';
import { persist } from 'zustand/middleware';

// Define the state and actions
interface BearState {
  bears: number;
  increase: () => void;
  reset: () => void;
}

// Create a store with persist middleware
export const useStore = create(
  persist(
    (set) => ({
      bears: 0,
      increase: () => set((state) => ({ bears: state.bears   1 })),
      reset: () => set({ bears: 0 }),
    }),
    {
      name: 'bear-storage', // Name of the key in localStorage
    }
  )
);

स्थिति लोकलस्टोरेज में कुंजी "बेयर-स्टोरेज" के अंतर्गत सहेजी गई है। अब, भले ही आप पेज को रीफ्रेश करें, पुनः लोड करने पर बियर्स की संख्या बनी रहेगी।

डिफ़ॉल्ट रूप से, पर्सिस्ट लोकलस्टोरेज का उपयोग करता है, लेकिन आप इसे सेशनस्टोरेज या किसी अन्य स्टोरेज सिस्टम में बदल सकते हैं। ज़ुस्टैंड में निरंतर स्थिति के विषय पर कवर करने के लिए कई चीज़ें हैं। आपको इस विषय पर एक विस्तृत ट्यूटोरियल/पोस्ट मिलेगा, जो इस पोस्ट का अनुसरण करेगा।

निष्कर्ष

हम सभी जानते हैं कि राज्य प्रबंधन उपकरण के रूप में Redux कितना बढ़िया है। लेकिन Redux के पास थोड़ा जटिल और बड़ा बॉयलरप्लेट है। यही कारण है कि अधिक से अधिक डेवलपर्स अपने राज्य प्रबंधन उपकरण के रूप में ज़स्टैंड को चुन रहे हैं जो सरल और स्केल-सक्षम है।

लेकिन फिर भी आप देखेंगे कि Redux गंभीर रूप से जटिल और नेस्टेड राज्य प्रबंधन के लिए अधिक अनुशंसित है।