عند إنشاء تطبيقات محرر كتلة WordPress المعقدة (Gutenberg)، تصبح إدارة الحالة بكفاءة أمرًا بالغ الأهمية. هذا هو المكان الذي يلعب فيه @wordpress/data. فهو يسمح لك بإدارة ومشاركة الحالة العالمية عبر الكتل والمكونات المختلفة في تطبيق WordPress الخاص بك.

إذا كنت جديدًا في إدارة الحالة العالمية أو تستخدم @wordpress/data، فلا تقلق! سترشدك مشاركة المدونة هذه عبر أساسيات المخفضات والإجراءات والمحددات، وتشرح كيفية استخدامها لإدارة الحالة في WordPress.

يوفر @wordpress/data طريقة لتخزين البيانات وتحديثها والوصول إليها عالميًا، مما يسمح للمكونات أو الكتل المختلفة بمشاركة نفس البيانات والتفاعل معها.

المفاهيم الأساسية في @wordpress/data

لفهم كيفية استخدام @wordpress/data، نحتاج إلى فهم ثلاثة مفاهيم رئيسية: المخفضات، والإجراءات، والمحددات. تشكل هذه جوهر كيفية إدارة الحالة وتحديثها.

الإجراءات:

الإجراء يشبه التعليمات أو الأمر الذي يخبر المخفض بما يجب فعله. إنه ببساطة كائن يتكون من جزأين:

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());

باختصار: المحدد هو وظيفة مساعدة تتيح لك الوصول إلى بيانات محددة من الحالة.

دليل خطوة بخطوة لتنفيذ الحالة العالمية في Gutenberg باستخدام @wordpress/data

الآن بعد أن غطينا الأساسيات، دعنا نتعرف على كيفية تنفيذ هذه المفاهيم في كتلة أو مكون Gutenberg. سنقوم بإعداد متجر بسيط باستخدام @wordpress/data، وإدارة بعض الحالات، واستخدام الإجراءات والمحددات للتفاعل مع تلك الحالة.

الخطوة 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. سيؤدي هذا إلى جعل المتجر متاحًا عالميًا عبر موقع WordPress الخاص بك.

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

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

register(store);

الخطوة 6: استخدام المتجر في المكونات
بمجرد تسجيل المتجر، يمكنك استخدامه في كتل أو مكونات Gutenberg الخاصة بك. على سبيل المثال، لإضافة عنصر إلى سلة التسوق:

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());

خاتمة

من خلال فهم أدوار المخفضات والإجراءات والمحددات، يمكنك بسهولة إدارة الحالة العالمية في مشاريع WordPress Gutenberg الخاصة بك باستخدام @wordpress/data. يتيح لك هذا النهج المنظم إدارة البيانات بشكل أكثر كفاءة، مما يجعل الكتل والمكونات الخاصة بك أكثر قوة وتفاعلية.

مع @wordpress/data، لديك حل موثوق وقابل للتطوير للتعامل مع الحالة عبر تطبيق WordPress بأكمله. جربه في مشروع جوتنبرج القادم الخاص بك!