Lors de la création d'applications complexes d'éditeur de blocs WordPress (Gutenberg), la gestion efficace de l'état devient cruciale. C'est là que @wordpress/data entre en jeu. Il vous permet de gérer et de partager l'état global entre différents blocs et composants de votre application WordPress.

Si vous débutez dans la gestion de l'état global ou dans l'utilisation de @wordpress/data, ne vous inquiétez pas ! Cet article de blog vous présentera les bases des réducteurs, des actions et des sélecteurs, expliquant comment les utiliser pour gérer l'état dans WordPress.

@wordpress/data fournit un moyen de stocker, mettre à jour et accéder aux données de manière globale, permettant à différents composants ou blocs de partager et d'interagir avec les mêmes données.

Concepts clés dans @wordpress/data

Pour comprendre comment utiliser @wordpress/data, nous devons comprendre trois concepts principaux : les réducteurs, les actions et les sélecteurs. Ceux-ci constituent le cœur de la façon dont l’état est géré et mis à jour.

Actes:

Une action est comme une instruction ou une commande qui indique au réducteur quoi faire. C'est simplement un objet qui comporte deux parties :

1. Type qui indique le type de changement en cours (par exemple, ajout, suppression, mise à jour).
2. Une charge utile qui contient les données nécessaires à cette modification (par exemple, quel élément ajouter).

Voici un exemple de ce à quoi pourraient ressembler les actions dans notre exemple de panier :

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 bref : Les actions indiquent au réducteur ce qui doit changer dans l'état.

Réducteurs :

Un réducteur est comme un gestionnaire de votre état. Chaque fois que quelque chose change dans votre application (par exemple, un utilisateur ajoute un bloc ou désactive une fonctionnalité), le réducteur écoute ce changement et met à jour l'état en conséquence.

Que fait un réducteur ? Il prend l'état actuel et une action, puis renvoie un nouvel état basé sur l'action.
Voici un exemple de réducteur simple qui gère un panier :

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 bref : Le réducteur définit comment l'état change lorsque des actions spécifiques sont envoyées.

Sélecteurs :

Un sélecteur est une fonction qui récupère ou sélectionne des données spécifiques de l'état. Lorsque vos composants ont besoin d'accéder à des données (comme afficher les articles dans le panier), ils utilisent un sélecteur pour récupérer ces données dans le magasin.

Par exemple, un sélecteur permettant d'obtenir tous les articles du panier pourrait ressembler à ceci :

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

Dans un composant, vous utiliseriez ce sélecteur pour accéder aux données du panier comme ceci :

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

En bref : Un sélecteur est une fonction d'assistance qui vous permet d'accéder à des données spécifiques de l'État.

Guide étape par étape pour implémenter l'état global dans Gutenberg avec @wordpress/data

Maintenant que nous avons couvert les bases, voyons comment vous pouvez implémenter ces concepts dans un bloc ou un composant Gutenberg. Nous allons créer un magasin simple avec @wordpress/data, gérer certains états et utiliser des actions et des sélecteurs pour interagir avec cet état.

Étape 1 : Définissez votre état initial
Tout d’abord, nous devons définir l’état initial de notre magasin. Ce sont les données par défaut avec lesquelles notre application démarre :

const DEFAULT_STATE = {
    cart: []
};

Étape 2 : Créer des actions
Ensuite, nous définissons les actions que nous utiliserons pour mettre à jour l'état. Dans notre cas, nous définirons deux actions : une pour ajouter un article au panier et une autre pour supprimer un article.

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

Étape 3 : Créer le réducteur
Le réducteur écoute les actions distribuées et met à jour l'état en conséquence. Voici notre réducteur, qui met à jour le panier lorsque les actions sont envoyées :

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

Étape 4 : Créer des sélecteurs
Les sélecteurs aident à récupérer des données spécifiques de l'état. Par exemple, si nous voulons obtenir tous les articles du panier, nous créerions un sélecteur comme celui-ci :

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

Étape 5 : Créer et enregistrer la boutique
Enfin, nous allons créer et enregistrer la boutique avec le package @wordpress/data. Cela rendra la boutique accessible dans le monde entier sur votre site WordPress.

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

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

register(store);

Étape 6 : Utilisation du Store dans les composants
Une fois la boutique enregistrée, vous pouvez l'utiliser dans vos blocs ou composants Gutenberg. Par exemple, pour ajouter un article au panier :

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

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

Pour récupérer les articles dans le panier :

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

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

Conclusion

En comprenant les rôles des réducteurs, des actions et des sélecteurs, vous pouvez facilement gérer l'état global de vos projets WordPress Gutenberg à l'aide de @wordpress/data. Cette approche structurée vous permet de gérer les données plus efficacement, rendant vos blocs et composants plus puissants et interactifs.

Avec @wordpress/data, vous disposez d'une solution fiable et évolutive pour gérer l'état de l'ensemble de votre application WordPress. Essayez-le dans votre prochain projet Gutenberg !