构建复杂的 WordPress 块编辑器 (Gutenberg) 应用程序时，有效管理状态变得至关重要。这就是 @wordpress/data 发挥作用的地方。它允许您跨 WordPress 应用程序中的不同块和组件管理和共享全局状态。

如果您不熟悉管理全局状态或使用@wordpress/data，请不要担心！这篇博文将引导您了解减速器、操作和选择器的基础知识，解释如何使用它们来管理 WordPress 中的状态。

@wordpress/data 提供了一种全局存储、更新和访问数据的方法，允许不同的组件或块共享相同的数据并与之交互。

@wordpress/data 中的关键概念

为了理解如何使用@wordpress/data，我们需要理解三个主要概念：reducers、actions和selectors。这些构成了状态管理和更新方式的核心。

行动：

动作就像一条指令或命令，告诉减速器要做什么。它只是一个由两部分组成的对象：

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

简而言之： Actions 告诉reducer 状态需要改变什么。

减速机：

reducer 就像你的状态的管理者。每当应用程序中发生某些变化（例如，用户添加块或禁用功能）时，reducer 就会监听该变化并相应地更新状态。

减速机有什么作用？它接受当前状态和一个操作，然后根据该操作返回一个新状态。
这是管理购物车的简单减速器的示例：

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

简而言之：reducer定义了当调度特定动作时状态如何改变。

选择器：

选择器是从状态检索或选择特定数据的函数。当您的组件需要访问数据（例如显示购物车中的商品）时，它们会使用选择器从商店中获取该数据。

例如，获取所有购物车商品的选择器可能如下所示：

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步：创建Reducer
减速器侦听分派的操作并相应地更新状态。这是我们的减速器，它在调度操作时更新购物车：

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 步：在组件中使用 Store
商店注册后，您可以在古腾堡块或组件中使用它。例如，要将商品添加到购物车：

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 应用程序的状态。在您的下一个古腾堡项目中尝试一下！