云策 WordPress 开发者社区

块编辑器开发文档

@wordpress/data-controls

查看官方原文 ↗
💡 云策文档标注

概述

@wordpress/data-controls 模块旨在简化与 @wordpress/data 包配合使用的常见控制实现。它提供了一组预定义的控制函数，用于处理 API 请求、分发动作和选择器解析，需确保注册表已启用 controls 插件。

关键要点

  • 模块安装：通过 npm install @wordpress/data-controls --save 安装，要求 ES2015+ 环境，否则需包含 polyfill。
  • 可用控制函数：包括 apiFetch（触发 API 获取）、dispatch（分发动作）、select（解析选择器）和 syncSelect（调用选择器），后三个是 @wordpress/data 包中内置控制的别名。
  • 注册控制：默认导出 controls 对象，用于在自定义存储中注册控制，配合 registerStore 使用。
  • 依赖条件：使用前需确保注册表已启用 controls 插件。

代码示例

import { apiFetch } from '@wordpress/data-controls';

// Action generator using apiFetch
export function* myAction() {
    const path = '/v2/my-api/items';
    const items = yield apiFetch( { path } );
    // do something with the items.
}
import { controls } from '@wordpress/data-controls';
import { registerStore } from '@wordpress/data';

registerStore( 'my-custom-store', {
    reducer,
    controls,
    actions,
    selectors,
    resolvers,
} );
📄 原文内容

The data controls module is a module intended to simplify implementation of common controls used with the @wordpress/data package.

Note: It is assumed that the registry being used has the controls plugin enabled on it (see more details on controls here)

Installation

Install the module

npm install @wordpress/data-controls --save

This package assumes that your code will run in an ES2015+ environment. If you’re using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @wordpress/babel-preset-default in your code.

The following controls are available on the object returned by the module:

API

apiFetch

Dispatches a control action for triggering an api fetch call.

Usage

import { apiFetch } from '@wordpress/data-controls';

// Action generator using apiFetch
export function* myAction() {
    const path = '/v2/my-api/items';
    const items = yield apiFetch( { path } );
    // do something with the items.
}

Parameters

  • request Object: Arguments for the fetch request.

Returns

  • Object: The control descriptor.

controls

The default export is what you use to register the controls with your custom store.

Usage

// WordPress dependencies
import { controls } from '@wordpress/data-controls';
import { registerStore } from '@wordpress/data';

// Internal dependencies
import reducer from './reducer';
import * as selectors from './selectors';
import * as actions from './actions';
import * as resolvers from './resolvers';

registerStore( 'my-custom-store', {
    reducer,
    controls,
    actions,
    selectors,
    resolvers,
} );

Returns

  • Object: An object for registering the default controls with the store.

dispatch

Control for dispatching an action in a registered data store. Alias for the dispatch control in the @wordpress/data package.

Parameters

  • storeNameOrDescriptor string | StoreDescriptor: The store object or identifier.
  • actionName string: The action name.
  • args any[]: Arguments passed without change to the @wordpress/data control.

select

Control for resolving a selector in a registered data store. Alias for the resolveSelect built-in control in the @wordpress/data package.

Parameters

  • storeNameOrDescriptor string | StoreDescriptor: The store object or identifier.
  • selectorName string: The selector name.
  • args any[]: Arguments passed without change to the @wordpress/data control.

syncSelect

Control for calling a selector in a registered data store. Alias for the select built-in control in the @wordpress/data package.

Parameters

  • storeNameOrDescriptor string | StoreDescriptor: The store object or identifier.
  • selectorName string: The selector name.
  • args any[]: Arguments passed without change to the @wordpress/data control.

Contributing to this package

This is an individual package that’s part of the Gutenberg project. The project is organized as a monorepo. It’s made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project’s main contributor guide.