जटिल वर्डप्रेस ब्लॉक एडिटर (गुटेनबर्ग) अनुप्रयोगों का निर्माण करते समय, राज्य को कुशलतापूर्वक प्रबंधित करना महत्वपूर्ण हो जाता है। यहीं पर @वर्डप्रेस/डेटा काम आता है। यह आपको अपने वर्डप्रेस एप्लिकेशन में विभिन्न ब्लॉकों और घटकों में वैश्विक स्थिति को प्रबंधित और साझा करने की अनुमति देता है।

यदि आप वैश्विक स्थिति को प्रबंधित करने या @वर्डप्रेस/डेटा का उपयोग करने में नए हैं, तो चिंता न करें! यह ब्लॉग पोस्ट आपको रिड्यूसर, एक्शन और चयनकर्ताओं की मूल बातें बताएगी, और बताएगी कि वर्डप्रेस में स्थिति को प्रबंधित करने के लिए उनका उपयोग कैसे करें।

@वर्डप्रेस/डेटा विश्व स्तर पर डेटा को स्टोर करने, अपडेट करने और एक्सेस करने का एक तरीका प्रदान करता है, जिससे विभिन्न घटकों या ब्लॉकों को एक ही डेटा साझा करने और उसके साथ इंटरैक्ट करने की अनुमति मिलती है।

@वर्डप्रेस/डेटा में मुख्य अवधारणाएँ

@वर्डप्रेस/डेटा का उपयोग कैसे करें यह समझने के लिए, हमें तीन मुख्य अवधारणाओं को समझने की आवश्यकता है: रिड्यूसर, एक्शन और चयनकर्ता। ये इस बात का मूल हैं कि राज्य को कैसे प्रबंधित और अद्यतन किया जाता है।

क्रियाएँ:

एक क्रिया एक निर्देश या आदेश की तरह होती है जो रेड्यूसर को बताती है कि क्या करना है। यह बस एक वस्तु है जिसके दो भाग हैं:

1. एक प्रकार जो बताता है कि किस प्रकार का परिवर्तन हो रहा है (उदाहरण के लिए, जोड़ें, हटाएं, अपडेट करें)।
2. एक पेलोड जिसमें उस परिवर्तन के लिए आवश्यक डेटा होता है (उदाहरण के लिए, कौन सा आइटम जोड़ना है)।

यहां एक उदाहरण दिया गया है कि हमारे कार्ट उदाहरण में गतिविधियां कैसी दिख सकती हैं:

const actions = {
    addToCart(item) {
        return {
            type: 'ADD_TO_CART', // Action type
            item // Payload: the item to add to the cart
        };
    },
    removeFromCart(itemId) {
        return {
            type: 'REMOVE_FROM_CART', // Action type
            itemId // Payload: the ID of the item to remove
        };
    }
};

संक्षेप में: क्रियाएं रिड्यूसर को बताती हैं कि राज्य में क्या बदलाव की जरूरत है।

रेड्यूसर:

एक रिड्यूसर आपके राज्य के प्रबंधक की तरह है। जब भी आपके एप्लिकेशन में कुछ परिवर्तन होता है (उदाहरण के लिए, कोई उपयोगकर्ता कोई ब्लॉक जोड़ता है या किसी सुविधा को अक्षम करता है), तो रिड्यूसर उस परिवर्तन को सुनता है और तदनुसार स्थिति को अपडेट करता है।

रेड्यूसर क्या करता है? यह वर्तमान स्थिति और एक कार्रवाई लेता है, फिर कार्रवाई के आधार पर एक नई स्थिति लौटाता है।
यहां एक साधारण रेड्यूसर का उदाहरण दिया गया है जो शॉपिंग कार्ट का प्रबंधन करता है:

const reducer = (state = { cart: [] }, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
            return {
                ...state, // Keep the existing state
                cart: [...state.cart, action.item] // Add the new item to the cart
            };
        case 'REMOVE_FROM_CART':
            return {
                ...state,
                cart: state.cart.filter((item) => item.id !== action.itemId) // Remove the item from the cart
            };
        default:
            return state; // Return the unchanged state for unknown actions
    }
};

संक्षेप में: रेड्यूसर परिभाषित करता है कि विशिष्ट क्रियाएं भेजे जाने पर स्थिति कैसे बदलती है।

चयनकर्ता:

चयनकर्ता एक फ़ंक्शन है जो राज्य से विशिष्ट डेटा पुनर्प्राप्त या चयन करता है। जब आपके घटकों को डेटा तक पहुंचने की आवश्यकता होती है (जैसे कार्ट में आइटम प्रदर्शित करना), तो वे स्टोर से उस डेटा को लाने के लिए एक चयनकर्ता का उपयोग करते हैं।

उदाहरण के लिए, सभी कार्ट आइटम प्राप्त करने के लिए एक चयनकर्ता इस तरह दिख सकता है:

const selectors = {
    getCartItems(state) {
        return state.cart; // Return the cart items from the state
    }
};

एक घटक में, आप कार्ट डेटा तक पहुंचने के लिए इस चयनकर्ता का उपयोग इस प्रकार करेंगे:

const cartItems = useSelect((select) => select('my-store').getCartItems());

संक्षेप में: एक चयनकर्ता एक सहायक फ़ंक्शन है जो आपको राज्य से विशिष्ट डेटा तक पहुंचने देता है।

@वर्डप्रेस/डेटा के साथ गुटेनबर्ग में वैश्विक राज्य को लागू करने के लिए चरण-दर-चरण मार्गदर्शिका

अब जब हमने मूल बातें कवर कर ली हैं, तो आइए देखें कि आप इन अवधारणाओं को गुटेनबर्ग ब्लॉक या घटक में कैसे लागू कर सकते हैं। हम @वर्डप्रेस/डेटा के साथ एक साधारण स्टोर स्थापित करेंगे, कुछ स्थिति का प्रबंधन करेंगे, और उस स्थिति के साथ इंटरैक्ट करने के लिए क्रियाओं और चयनकर्ताओं का उपयोग करेंगे।

चरण 1: अपनी प्रारंभिक स्थिति परिभाषित करें
सबसे पहले, हमें अपने स्टोर की प्रारंभिक स्थिति को परिभाषित करने की आवश्यकता है। यह डिफ़ॉल्ट डेटा है जिससे हमारा एप्लिकेशन प्रारंभ होता है:

const DEFAULT_STATE = {
    cart: []
};

चरण 2: क्रियाएँ बनाएँ
इसके बाद, हम उन क्रियाओं को परिभाषित करते हैं जिनका उपयोग हम राज्य को अद्यतन करने के लिए करेंगे। हमारे मामले में, हम दो क्रियाओं को परिभाषित करेंगे: एक कार्ट में कोई आइटम जोड़ने के लिए और दूसरा किसी आइटम को हटाने के लिए।

const actions = {
    addToCart(item) {
        return {
            type: 'ADD_TO_CART',
            item
        };
    },
    removeFromCart(itemId) {
        return {
            type: 'REMOVE_FROM_CART',
            itemId
        };
    }
};

चरण 3: रेड्यूसर बनाएं
रेड्यूसर भेजे गए कार्यों को सुनता है और तदनुसार स्थिति को अपडेट करता है। यहां हमारा रेड्यूसर है, जो कार्रवाई भेजे जाने पर कार्ट को अपडेट करता है:

const reducer = (state = DEFAULT_STATE, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
            return {
                ...state,
                cart: [...state.cart, action.item]
            };
        case 'REMOVE_FROM_CART':
            return {
                ...state,
                cart: state.cart.filter((item) => item.id !== action.itemId)
            };
        default:
            return state;
    }
};

चरण 4: चयनकर्ता बनाएं
चयनकर्ता राज्य से विशिष्ट डेटा पुनर्प्राप्त करने में सहायता करते हैं। उदाहरण के लिए, यदि हम कार्ट में सभी आइटम प्राप्त करना चाहते हैं, तो हम इस तरह एक चयनकर्ता बनाएंगे:

const selectors = {
    getCartItems(state) {
        return state.cart;
    }
};

चरण 5: स्टोर बनाएं और पंजीकृत करें
अंत में, हम @wordpress/data पैकेज के साथ स्टोर बनाएंगे और पंजीकृत करेंगे। यह स्टोर को आपकी वर्डप्रेस साइट पर विश्व स्तर पर पहुंच योग्य बना देगा।

import { createReduxStore, register } from '@wordpress/data';

const store = createReduxStore('my-cart-store', {
    reducer,
    actions,
    selectors,
});

register(store);

चरण 6: घटकों में स्टोर का उपयोग करना
एक बार स्टोर पंजीकृत हो जाने पर, आप इसे अपने गुटेनबर्ग ब्लॉक या घटकों में उपयोग कर सकते हैं। उदाहरण के लिए, कार्ट में कोई आइटम जोड़ने के लिए:

import { useDispatch } from '@wordpress/data';

const { addToCart } = useDispatch('my-cart-store');
addToCart({ id: 1, name: 'Sample Item' });

कार्ट में आइटम लाने के लिए:

import { useSelect } from '@wordpress/data';

const cartItems = useSelect((select) => select('my-cart-store').getCartItems());

निष्कर्ष

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

@वर्डप्रेस/डेटा के साथ, आपके पास अपने संपूर्ण वर्डप्रेस एप्लिकेशन में स्थिति को संभालने के लिए एक विश्वसनीय और स्केलेबल समाधान है। इसे अपने अगले गुटेनबर्ग प्रोजेक्ट में आज़माएँ!