Beim Erstellen komplexer WordPress-Blockeditor-Anwendungen (Gutenberg) ist eine effiziente Statusverwaltung von entscheidender Bedeutung. Hier kommt @wordpress/data ins Spiel. Es ermöglicht Ihnen, den globalen Status über verschiedene Blöcke und Komponenten in Ihrer WordPress-Anwendung hinweg zu verwalten und zu teilen.

Machen Sie sich keine Sorgen, wenn Sie mit der Verwaltung des globalen Status oder der Verwendung von @wordpress/data noch nicht vertraut sind! Dieser Blogbeitrag führt Sie durch die Grundlagen von Reduzierern, Aktionen und Selektoren und erklärt, wie Sie sie zum Verwalten des Status in WordPress verwenden.

@wordpress/data bietet eine Möglichkeit, Daten global zu speichern, zu aktualisieren und darauf zuzugreifen, sodass verschiedene Komponenten oder Blöcke dieselben Daten teilen und mit ihnen interagieren können.

Schlüsselkonzepte in @wordpress/data

Um zu verstehen, wie @wordpress/data verwendet wird, müssen wir drei Hauptkonzepte verstehen: Reduzierer, Aktionen und Selektoren. Diese bilden den Kern der Art und Weise, wie der Status verwaltet und aktualisiert wird.

Aktionen:

Eine Aktion ist wie eine Anweisung oder ein Befehl, der dem Reduzierer sagt, was er tun soll. Es ist einfach ein Objekt, das aus zwei Teilen besteht:

1. Ein Typ, der angibt, welche Art von Änderung stattfindet (z. B. hinzufügen, entfernen, aktualisieren).
2. Eine Nutzlast, die die für diese Änderung erforderlichen Daten enthält (z. B. welches Element hinzugefügt werden soll).

Hier ist ein Beispiel dafür, wie Aktionen in unserem Warenkorb-Beispiel aussehen könnten:

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

Kurz gesagt: Aktionen teilen dem Reduzierer mit, was sich im Zustand ändern muss.

Reduzierstücke:

Ein Reduzierer ist wie ein Manager Ihres Staates. Immer wenn sich etwas in Ihrer Anwendung ändert (z. B. ein Benutzer einen Block hinzufügt oder eine Funktion deaktiviert), wartet der Reduzierer auf diese Änderung und aktualisiert den Status entsprechend.

Was macht ein Reduzierer? Es nimmt den aktuellen Status und eine Aktion an und gibt dann basierend auf der Aktion einen neuen Status zurück.
Hier ist ein Beispiel für einen einfachen Reduzierer, der einen Warenkorb verwaltet:

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

Kurz gesagt: Der Reduzierer definiert, wie sich der Status ändert, wenn bestimmte Aktionen ausgelöst werden.

Selektoren:

Ein Selektor ist eine Funktion, die bestimmte Daten aus dem Status abruft oder auswählt. Wenn Ihre Komponenten auf Daten zugreifen müssen (z. B. die Artikel im Warenkorb anzeigen), verwenden sie einen Selektor, um diese Daten aus dem Shop abzurufen.

Ein Selektor zum Abrufen aller Warenkorbartikel könnte beispielsweise so aussehen:

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

In einer Komponente würden Sie diesen Selektor verwenden, um wie folgt auf die Warenkorbdaten zuzugreifen:

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

Kurz gesagt: Ein Selektor ist eine Hilfsfunktion, mit der Sie auf bestimmte Daten aus dem Status zugreifen können.

Schritt-für-Schritt-Anleitung zur Implementierung von Global State in Gutenberg mit @wordpress/data

Da wir uns nun mit den Grundlagen befasst haben, gehen wir nun durch, wie Sie diese Konzepte in einem Gutenberg-Block oder einer Gutenberg-Komponente implementieren können. Wir richten einen einfachen Store mit @wordpress/data ein, verwalten einen Status und verwenden Aktionen und Selektoren, um mit diesem Status zu interagieren.

Schritt 1: Definieren Sie Ihren Ausgangszustand
Zuerst müssen wir den Ausgangszustand unseres Shops definieren. Dies sind die Standarddaten, mit denen unsere Anwendung beginnt:

const DEFAULT_STATE = {
    cart: []
};

Schritt 2: Aktionen erstellen
Als Nächstes definieren wir die Aktionen, mit denen wir den Status aktualisieren. In unserem Fall definieren wir zwei Aktionen: eine zum Hinzufügen eines Artikels zum Warenkorb und eine weitere zum Entfernen eines Artikels.

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

Schritt 3: Reduzierer erstellen
Der Reduzierer wartet auf gesendete Aktionen und aktualisiert den Status entsprechend. Hier ist unser Reduzierer, der den Warenkorb aktualisiert, wenn Aktionen ausgeführt werden:

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

Schritt 4: Selektoren erstellen
Selektoren helfen dabei, bestimmte Daten aus dem Bundesstaat abzurufen. Wenn wir beispielsweise alle Artikel im Warenkorb haben möchten, würden wir einen Selektor wie diesen erstellen:

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

Schritt 5: Shop erstellen und registrieren
Abschließend erstellen und registrieren wir den Shop mit dem Paket @wordpress/data. Dadurch wird der Store weltweit auf Ihrer WordPress-Site zugänglich gemacht.

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

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

register(store);

Schritt 6: Verwenden des Stores in Komponenten
Sobald der Store registriert ist, können Sie ihn in Ihren Gutenberg-Blöcken oder -Komponenten verwenden. Um beispielsweise einen Artikel in den Warenkorb zu legen:

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

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

Um die Artikel im Warenkorb abzurufen:

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

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

Abschluss

Wenn Sie die Rollen von Reduzierern, Aktionen und Selektoren verstehen, können Sie den globalen Status in Ihren WordPress-Gutenberg-Projekten mithilfe von @wordpress/data einfach verwalten. Dieser strukturierte Ansatz ermöglicht Ihnen eine effizientere Datenverwaltung und macht Ihre Blöcke und Komponenten leistungsfähiger und interaktiver.

Mit @wordpress/data verfügen Sie über eine zuverlässige und skalierbare Lösung für die Statusverwaltung Ihrer gesamten WordPress-Anwendung. Probieren Sie es bei Ihrem nächsten Gutenberg-Projekt aus!