При создании сложных приложений редактора блоков 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());

Коротко: Селектор — это вспомогательная функция, которая позволяет получить доступ к определенным данным из состояния.

Пошаговое руководство по реализации глобального состояния в Гутенберге с помощью @wordpress/data

Теперь, когда мы рассмотрели основы, давайте рассмотрим, как можно реализовать эти концепции в блоке или компоненте Гутенберга. Мы настроим простое хранилище с помощью @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. Попробуйте это в своем следующем проекте Гутенберга!