複雑な WordPress ブロック エディター (Gutenberg) アプリケーションを構築する場合、状態を効率的に管理することが重要になります。ここで @wordpress/data が活躍します。これにより、WordPress アプリケーション内のさまざまなブロックやコンポーネント間でグローバルな状態を管理および共有できるようになります。

グローバル状態の管理や @wordpress/data の使用が初めてでも、心配する必要はありません。このブログ投稿では、リデューサー、アクション、セレクターの基本を説明し、それらを使用して WordPress で状態を管理する方法を説明します。

@wordpress/data は、データをグローバルに保存、更新、アクセスする方法を提供し、さまざまなコンポーネントやブロックが同じデータを共有して操作できるようにします。

@wordpress/data の主要な概念

@wordpress/data の使用方法を理解するには、リデューサー、アクション、セレクターという 3 つの主要な概念を理解する必要があります。これらは、状態の管理と更新方法の中核を形成します。

アクション:

アクションは、リデューサーに何をすべきかを指示する命令やコマンドのようなものです。これは単純に 2 つの部分を持つオブジェクトです:

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 を使用して Gutenberg にグローバル ステートを実装するためのステップバイステップ ガイド

基本を説明したので、これらの概念を Gutenberg ブロックまたはコンポーネントに実装する方法を見てみましょう。 @wordpress/data を使用して単純なストアをセットアップし、いくつかの状態を管理し、アクションとセレクターを使用してその状態と対話します。

ステップ 1: 初期状態を定義する
まず、ストアの初期状態を定義する必要があります。これはアプリケーションが開始するデフォルトのデータです:

const DEFAULT_STATE = {
    cart: []
};

ステップ 2: アクションを作成する
次に、状態を更新するために使用するアクションを定義します。この例では、2 つのアクションを定義します。1 つはカートに商品を追加するアクション、もう 1 つは商品を削除するアクションです。

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/data を使用して WordPress Gutenberg プロジェクトのグローバル状態を簡単に管理できるようになります。この構造化されたアプローチにより、データをより効率的に管理できるようになり、ブロックとコンポーネントがより強力でインタラクティブになります。

@wordpress/data を使用すると、WordPress アプリケーション全体の状態を処理するための信頼性とスケーラブルなソリューションが得られます。次の Gutenberg プロジェクトで試してみてください!