WordPress源码深度解析之：古腾堡的`data store`：`@wordpress/data`模块的状态管理机制。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，我是你们今天的状态管理老司机，接下来咱们要一起深入挖掘一下WordPress古腾堡编辑器背后的神秘力量——@wordpress/data模块。这玩意儿就像古腾堡的心脏，负责协调各种数据，让编辑器流畅运转。准备好了吗？系好安全带，咱们发车！

第一站：@wordpress/data是个啥？

简单来说，@wordpress/data 是 WordPress 官方出品的一个状态管理库，基于 Redux 架构，但又做了很多优化和简化，更适合 WordPress 生态使用。你可以把它想象成一个大型的“数据仓库”，各种组件都可以从这里存取数据，并订阅数据的变化。

为什么要用它呢？因为在复杂的应用中，组件之间的数据传递和状态同步是个大问题。如果每个组件都自己维护一套状态，很容易出现混乱和不一致。@wordpress/data 提供了一个中心化的管理方式，让数据流动更加清晰可控。

第二站：核心概念扫盲

要理解 @wordpress/data，我们需要先了解几个核心概念：

Store (仓库): 整个应用只有一个 store，它包含了所有状态数据。可以理解成一个巨大的 JavaScript 对象。
Actions (动作): 改变状态的唯一途径。Actions 是一个包含 type 属性的普通 JavaScript 对象，用于描述发生了什么。
Reducers (归约器): 纯函数，接收先前的状态和一个 action，返回新的状态。Reducers 决定了如何根据 action 来更新状态。
Selectors (选择器): 从 store 中获取数据的函数。Selectors 可以对数据进行转换和过滤，方便组件使用。
Controls (控制器): 处理副作用，例如异步操作、网络请求等。 Actions 触发 Controls 执行异步任务，然后通过 dispatch 发起新的 Action 来更新状态。
Resolvers (解析器): 类似于Selectors, 但是带有副作用，可以用来从 API 获取数据，并更新 Store。
Registry (注册表): 负责注册和管理 Store，使组件可以访问到特定的 Store。

可以用一个表格来总结一下：

概念	描述	作用	举例
Store	包含应用所有状态数据的单一来源。	存储和管理状态。	`{ posts: [], isLoading: false, error: null }`
Actions	描述发生了什么事情的普通 JavaScript 对象，必须包含 `type` 属性。	触发状态更新。	`{ type: 'FETCH_POSTS_SUCCESS', posts: [...] }`
Reducers	接收先前的状态和一个 action，返回新的状态的纯函数。	根据 action 更新状态。	`(state, action) => { switch (action.type) { case 'FETCH_POSTS_SUCCESS': return { ...state, posts: action.posts }; default: return state; } }`
Selectors	从 store 中获取数据的函数。	从 store 中提取特定的数据。	`(state) => state.posts`
Controls	处理副作用的函数，例如异步操作、网络请求等。	执行异步任务。	`apiFetch({ path: '/wp/v2/posts' })`
Resolvers	类似于Selectors, 但是带有副作用，可以用来从 API 获取数据，并更新 Store。	从 API 获取数据，并更新 Store。	`function* getPosts() { const posts = yield apiFetch({ path: '/wp/v2/posts' }); return actions.receivePosts(posts); }`
Registry	负责注册和管理 Store，使组件可以访问到特定的 Store。	注册和管理 Store。	`registerStore('my-plugin/data', storeConfig);`

第三站：动手实践，代码说话

光说不练假把式，咱们来写一个简单的例子，模拟一个文章列表的获取和展示。

1. 创建 Store

首先，我们需要创建一个 Store 来存储文章数据。为了方便管理，我们通常会把 Store 的配置放在一个单独的文件里，例如 store.js：

// store.js

import { registerStore } from '@wordpress/data';
import { apiFetch } from '@wordpress/api-fetch';

const DEFAULT_STATE = {
    posts: [],
    isLoading: false,
    error: null,
};

const actions = {
    fetchPosts() {
        return {
            type: 'FETCH_POSTS',
        };
    },
    fetchPostsSuccess(posts) {
        return {
            type: 'FETCH_POSTS_SUCCESS',
            posts,
        };
    },
    fetchPostsError(error) {
        return {
            type: 'FETCH_POSTS_ERROR',
            error,
        };
    },
    // 接收从 API 获取的 Posts 数据
    receivePosts(posts) {
        return {
            type: 'RECEIVE_POSTS',
            posts,
        };
    },
};

const reducer = (state = DEFAULT_STATE, action) => {
    switch (action.type) {
        case 'FETCH_POSTS':
            return {
                ...state,
                isLoading: true,
                error: null,
            };
        case 'FETCH_POSTS_SUCCESS':
            return {
                ...state,
                posts: action.posts,
                isLoading: false,
            };
        case 'FETCH_POSTS_ERROR':
            return {
                ...state,
                isLoading: false,
                error: action.error,
            };
        case 'RECEIVE_POSTS':
            return {
                ...state,
                posts: action.posts,
            };
        default:
            return state;
    }
};

const selectors = {
    getPosts(state) {
        return state.posts;
    },
    isLoading(state) {
        return state.isLoading;
    },
    getError(state) {
        return state.error;
    },
};

const controls = {
    FETCH_POSTS() {
        return apiFetch({ path: '/wp/v2/posts' });
    },
};

const resolvers = {
    * getPosts() {
        try {
            const posts = yield actions.fetchPosts(); // 触发 FETCH_POSTS action, control 会处理异步请求
            return actions.fetchPostsSuccess(posts); // 请求成功，触发 FETCH_POSTS_SUCCESS action
        } catch (error) {
            return actions.fetchPostsError(error); // 请求失败，触发 FETCH_POSTS_ERROR action
        }
    },
};

const storeConfig = {
    reducer,
    actions,
    selectors,
    controls,
    resolvers,
    // initialState: DEFAULT_STATE // 可以选择性地设置初始状态，这里已经默认设置了
};

registerStore('my-plugin/data', storeConfig); // 注册 Store

代码解释：

DEFAULT_STATE: 定义了 Store 的初始状态，包括文章列表、加载状态和错误信息。
actions: 定义了几个 action，用于触发状态更新。例如，fetchPosts 用于表示开始获取文章，fetchPostsSuccess 用于表示获取文章成功，fetchPostsError 用于表示获取文章失败。
reducer: 定义了如何根据 action 来更新状态。例如，当收到 FETCH_POSTS_SUCCESS action 时，reducer 会将 posts 更新为 action 中携带的文章列表，并将 isLoading 设置为 false。
selectors: 定义了几个 selector，用于从 store 中获取数据。例如，getPosts 用于获取文章列表，isLoading 用于获取加载状态。
controls: 处理副作用，这里使用 apiFetch 发起 API 请求获取文章列表。注意这里使用了字符串作为 Action 的 type，并且没有直接 dispatch Action，而是把异步操作的逻辑放在了 controls 中。
resolvers: 定义了如何从 API 获取数据，并更新 Store。resolvers 使用 generator 函数, yield 关键字可以暂停函数的执行，直到 promise resolve。
registerStore: 将 Store 注册到全局的 @wordpress/data 注册表中，这样其他组件就可以访问到这个 Store 了。'my-plugin/data' 是 Store 的命名空间，建议使用插件或区块的唯一标识符。

2. 使用 Store

现在，我们可以在组件中使用这个 Store 了。例如，我们可以创建一个组件来展示文章列表：

// MyListComponent.js

import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect } from '@wordpress/element';

function MyListComponent() {
    const posts = useSelect((select) => select('my-plugin/data').getPosts() || []);
    const isLoading = useSelect((select) => select('my-plugin/data').isLoading());
    const error = useSelect((select) => select('my-plugin/data').getError());
    const { getPosts } = useDispatch('my-plugin/data');

    useEffect(() => {
        getPosts(); // 组件加载时，触发获取文章的 action
    }, [getPosts]);

    if (isLoading) {
        return <p>Loading...</p>;
    }

    if (error) {
        return <p>Error: {error.message}</p>;
    }

    return (
        <ul>
            {posts.map((post) => (
                <li key={post.id}>{post.title.rendered}</li>
            ))}
        </ul>
    );
}

export default MyListComponent;

代码解释：

useSelect: 一个 React Hook，用于从 store 中选择数据。它接收一个函数作为参数，该函数接收 select 对象作为参数，可以使用 select 对象来访问 store 中的数据。当 store 中的数据发生变化时，useSelect 会自动更新组件。
useDispatch: 一个 React Hook，用于获取 dispatch 函数。dispatch 函数用于触发 action，从而更新 store 中的状态。
useEffect: 一个 React Hook，用于在组件加载时执行一些操作。在这里，我们使用 useEffect 来触发获取文章的 action。
select('my-plugin/data'): 通过命名空间 'my-plugin/data' 来访问我们注册的 Store。
getPosts(): 调用 Store 中的 getPosts selector 来获取文章列表。
dispatch('my-plugin/data').fetchPosts(): 调用 dispatch 函数来触发 fetchPosts action。

3. 注册组件 (例如在 Gutenberg 编辑器中)

// index.js (或者你的区块的入口文件)

import { registerBlockType } from '@wordpress/blocks';
import MyListComponent from './MyListComponent';

registerBlockType('my-plugin/my-list-block', {
    title: 'My List Block',
    icon: 'list-view',
    category: 'common',
    edit: () => <MyListComponent />,
    save: () => null, // 动态渲染，不需要保存静态 HTML
});

第四站：进阶技巧与注意事项

命名空间 (Namespace): Store 的命名空间非常重要，它用于区分不同的 Store。建议使用插件或区块的唯一标识符作为命名空间。
Action 的 Type: Action 的 type 应该具有描述性，方便调试和维护。可以使用常量来定义 Action 的 type，例如：

const FETCH_POSTS = 'FETCH_POSTS';

const actions = {
    fetchPosts() {
        return {
            type: FETCH_POSTS,
        };
    },
};

Immutability (不可变性): Reducer 必须是纯函数，不能修改原始状态，而是返回一个新的状态对象。可以使用 Object.assign() 或展开运算符 (...) 来创建新的状态对象。
Middleware (中间件): @wordpress/data 支持中间件，可以用来扩展 Store 的功能，例如添加日志记录、调试工具等。
测试 (Testing): 对 Reducers 和 Selectors 进行单元测试非常重要，可以确保状态管理逻辑的正确性。

第五站：常见问题与解答

Q: 什么时候应该使用 @wordpress/data？

A: 当你的应用需要管理复杂的状态，并且多个组件需要共享和同步数据时，就应该考虑使用 @wordpress/data。
Q: @wordpress/data 和 Redux 有什么区别？

A: @wordpress/data 基于 Redux 架构，但做了很多优化和简化，更适合 WordPress 生态使用。例如，@wordpress/data 提供了 useSelect 和 useDispatch 这样的 React Hook，方便组件使用。此外，@wordpress/data 还集成了 WordPress 的 API 和数据模型。
Q: 如何调试 @wordpress/data？

A: 可以使用 Redux DevTools 插件来调试 @wordpress/data。
Q: 如何处理异步操作？

A: 可以使用 controls 和 resolvers 来处理异步操作。controls 用于执行异步任务，resolvers 用于触发 action，并根据异步任务的结果来更新状态。

第六站：总结与展望

@wordpress/data 是古腾堡编辑器中一个非常重要的模块，它提供了一种中心化的状态管理机制，让数据流动更加清晰可控。虽然学习曲线稍微陡峭，但掌握了它，你就能更好地理解古腾堡的运作方式，并开发出更强大的 WordPress 插件和区块。

未来，@wordpress/data 可能会朝着更模块化、更易用的方向发展。例如，可能会引入更强大的类型检查、更灵活的中间件机制等。

希望今天的分享能帮助大家更好地理解 @wordpress/data。如果有什么问题，欢迎随时提问！记住，状态管理虽然复杂，但只要掌握了核心概念，多加练习，就能成为状态管理大师！

下课！

发表回复 取消回复

发表回复取消回复