Al crear aplicaciones complejas de editor de bloques de WordPress (Gutenberg), administrar el estado de manera eficiente se vuelve crucial. Aquí es donde entra en juego @wordpress/data. Le permite administrar y compartir el estado global entre diferentes bloques y componentes en su aplicación de WordPress.

Si eres nuevo en la gestión del estado global o en el uso de @wordpress/data, ¡no te preocupes! Esta publicación de blog lo guiará a través de los conceptos básicos de reductores, acciones y selectores, y le explicará cómo usarlos para administrar el estado en WordPress.

@wordpress/data proporciona una manera de almacenar, actualizar y acceder a datos globalmente, permitiendo que diferentes componentes o bloques compartan e interactúen con los mismos datos.

Conceptos clave en @wordpress/data

Para entender cómo usar @wordpress/data, necesitamos entender tres conceptos principales: reductores, acciones y selectores. Estos forman el núcleo de cómo se gestiona y actualiza el estado.

Comportamiento:

Una acción es como una instrucción o comando que le dice al reductor qué hacer. Es simplemente un objeto que tiene dos partes:

1. Un tipo que indica qué tipo de cambio está ocurriendo (por ejemplo, agregar, eliminar, actualizar).
2. Una carga útil que contiene los datos necesarios para ese cambio (por ejemplo, qué elemento agregar).

Aquí hay un ejemplo de cómo se verían las acciones en nuestro ejemplo de carrito:

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
        };
    }
};

En resumen: Las acciones le dicen al reductor qué debe cambiar en el estado.

Reductores:

Un reductor es como un administrador de su estado. Cada vez que algo cambia en su aplicación (por ejemplo, un usuario agrega un bloque o deshabilita una función), el reductor escucha ese cambio y actualiza el estado en consecuencia.

¿Qué hace un reductor? Toma el estado actual y una acción, luego devuelve un nuevo estado basado en la acción.
A continuación se muestra un ejemplo de un reductor simple que gestiona un carrito de compras:

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
    }
};

En resumen: El reductor define cómo cambia el estado cuando se envían acciones específicas.

Selectores:

Un selector es una función que recupera o selecciona datos específicos del estado. Cuando sus componentes necesitan acceder a datos (como mostrar los artículos en el carrito), utilizan un selector para obtener esos datos de la tienda.

Por ejemplo, un selector para obtener todos los artículos del carrito podría verse así:

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

En un componente, usarías este selector para acceder a los datos del carrito de esta manera:

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

En resumen: Un selector es una función auxiliar que le permite acceder a datos específicos del estado.

Guía paso a paso para implementar el estado global en Gutenberg con @wordpress/data

Ahora que hemos cubierto los conceptos básicos, veamos cómo se pueden implementar estos conceptos en un bloque o componente de Gutenberg. Configuraremos una tienda simple con @wordpress/data, administraremos algún estado y usaremos acciones y selectores para interactuar con ese estado.

Paso 1: Defina su estado inicial
Primero, necesitamos definir el estado inicial de nuestra tienda. Estos son los datos predeterminados con los que comienza nuestra aplicación:

const DEFAULT_STATE = {
    cart: []
};

Paso 2: Crear acciones
A continuación, definimos las acciones que utilizaremos para actualizar el estado. En nuestro caso definiremos dos acciones: una para agregar un artículo al carrito y otra para eliminar un artículo.

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

Paso 3: Crear el reductor
El reductor escucha las acciones enviadas y actualiza el estado en consecuencia. Aquí está nuestro reductor, que actualiza el carrito cuando se envían acciones:

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;
    }
};

Paso 4: Crear selectores
Los selectores ayudan a recuperar datos específicos del estado. Por ejemplo, si queremos obtener todos los artículos del carrito, crearíamos un selector como este:

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

Paso 5: Crear y registrar la tienda
Finalmente, crearemos y registraremos la tienda con el paquete @wordpress/data. Esto hará que la tienda sea accesible globalmente en su sitio de WordPress.

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

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

register(store);

Paso 6: Usar la Tienda en Componentes
Una vez que la tienda esté registrada, podrás usarla en tus bloques o componentes de Gutenberg. Por ejemplo, para agregar un artículo al carrito:

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

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

Para recuperar los artículos del carrito:

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

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

Conclusión

Al comprender las funciones de los reductores, acciones y selectores, puede administrar fácilmente el estado global en sus proyectos de WordPress Gutenberg usando @wordpress/data. Este enfoque estructurado le permite administrar datos de manera más eficiente, haciendo que sus bloques y componentes sean más potentes e interactivos.

Con @wordpress/data, tienes una solución confiable y escalable para manejar el estado en toda tu aplicación de WordPress. ¡Pruébalo en tu próximo proyecto de Gutenberg!