インストール

モジュールをインストールします 

  1. npm install @wordpress/data --save

このパッケージは、あなたのコードがES2015+環境で実行されることを前提としています。もし、言語機能やAPIのサポートが限られているか、全くない環境を使用している場合は、コードに@wordpress/babel-preset-defaultで提供されるポリフィルを含めるべきです。

ストアの登録

register関数を使用して、独自のストアを中央データレジストリに追加します。この関数は1つの引数を受け取ります - createReduxStoreファクトリ関数で作成できるストア記述子です。createReduxStoreは2つの引数を受け取ります：モジュールを識別するための名前と、状態がどのように表現され、変更され、アクセスされるかを説明する値を持つ構成オブジェクトです。最低限、状態の形状と、ストアにディスパッチされたアクションに応じてどのように変更されるかを説明するリデューサー関数を提供する必要があります。 

  1. import apiFetch from '@wordpress/api-fetch';
  2. import { createReduxStore, register } from '@wordpress/data';
  4. const DEFAULT_STATE = {
  5.    prices: {},
  6.    discountPercent: 0,
  7. };
  9. const actions = {
  10.    setPrice( item, price ) {
  11.    return {
  12.    type: 'SET_PRICE',
  13.    item,
  14.    price,
  15.    };
  16.    },
  18.    startSale( discountPercent ) {
  19.    return {
  20.    type: 'START_SALE',
  21.    discountPercent,
  22.    };
  23.    },
  25.    fetchFromAPI( path ) {
  26.    return {
  27.    type: 'FETCH_FROM_API',
  28.    path,
  29.    };
  30.    },
  31. };
  33. const store = createReduxStore( 'my-shop', {
  34.    reducer( state = DEFAULT_STATE, action ) {
  35.    switch ( action.type ) {
  36.    case 'SET_PRICE':
  37.    return {
  38.    ...state,
  39.    prices: {
  40.    ...state.prices,
  41.    [ action.item ]: action.price,
  42.    },
  43.    };
  45.    case 'START_SALE':
  46.    return {
  47.    ...state,
  48.    discountPercent: action.discountPercent,
  49.    };
  50.    }
  52.    return state;
  53.    },
  55.    actions,
  57.    selectors: {
  58.    getPrice( state, item ) {
  59.    const { prices, discountPercent } = state;
  60.    const price = prices[ item ];
  62.    return price * ( 1 - 0.01 * discountPercent );
  63.    },
  64.    },
  66.    controls: {
  67.    FETCH_FROM_API( action ) {
  68.    return apiFetch( { path: action.path } );
  69.    },
  70.    },
  72.    resolvers: {
  73.    *getPrice( item ) {
  74.    const path = '/wp/v2/prices/' + item;
  75.    const price = yield actions.fetchFromAPI( path );
  76.    return actions.setPrice( item, price );
  77.    },
  78.    },
  79. } );
  81. register( store );
  2. - `````name````` (`````string`````) – ストアの名前 
  3. - `````instantiate````` (`````Function`````) – 次のメソッドを持つ[Reduxライクなストアオブジェクト](https://redux.js.org/basics/store)を返します：  
  4.   - `````getState()`````: 登録されたリデューサーの状態値を返します  
  5.     - Reduxの並行: [`````getState`````](https://redux.js.org/api/store#getstate)   
  6.   - `````subscribe( listener: Function )`````: 状態の値が変更されるたびに呼び出される関数を登録します。  
  7.     - Reduxの並行: [`````subscribe`````](https://redux.js.org/api/store#subscribelistener)   
  8.   - `````dispatch( action: Object )`````: アクションオブジェクトを与えられた場合、登録されたリデューサーを呼び出し、状態値を更新します。  
  9.     - Reduxの並行: [`````dispatch`````](https://redux.js.org/api/store#dispatchaction)
  10.  <a name="redux-store-options"></a>
  13. ### Reduxストアオプション
  15. #### リデューサー
  17. [**リデューサー**](https://redux.js.org/basics/reducers)は、前の`````state`````と`````action`````を引数として受け取り、更新された`````state`````値を返す関数です。
  20. #### アクション
  22. **`````actions`````**オブジェクトは、ストアで利用可能なすべての[action creators](https://redux.js.org/glossary#action-creator)を説明する必要があります。アクションクリエイターは、オプションで引数を受け取り、登録されたリデューサーにディスパッチするアクションオブジェクトを返す関数です。*アクションをディスパッチすることは、状態を変更するための主要なメカニズムです。*
  25. #### セレクター
  27. **`````selectors`````**オブジェクトには、状態値にアクセスし、導出するための関数のセットが含まれています。セレクターは、状態とオプションの引数を受け取り、状態からいくつかの値を返す関数です。*セレクターを呼び出すことは、状態からデータを取得するための主要なメカニズムです*、そして通常は変更に対してより敏感で、[正規化されたオブジェクト](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape#designing-a-normalized-state)としてはあまり使いやすくない生データの上に有用な抽象化を提供します。
  30. #### リゾルバー
  32. **リゾルバー**は、セレクターの副作用です。セレクターの結果が外部ソースから満たされる必要がある場合、最初にセレクターが呼び出されたときに満たす動作が行われるようにリゾルバーを定義できます。  
  34. `````resolvers`````オプションは、各キーが作用するセレクターの名前であり、値がセレクターに渡されるのと同じ引数を受け取る関数であるオブジェクトとして渡す必要があります。これにより、必要に応じてセレクターの要件を満たすためにディスパッチできます。ほとんどのデータ消費者がその後の状態変更にサブスクライブすることを考慮に入れています（`````subscribe`````または`````withSelect`````）。
  37. #### コントロール
  39. **コントロール**は、特定のアクションタイプに関連付けられた実行フローベヘイビアを定義します。これは、ストアの非同期データフローを実装する際に特に便利です。特定の制御されたアクションタイプを生成するジェネレーターとしてアクションクリエイターやリゾルバーを定義することにより、実行はコントロールハンドラーによって定義された通りに進行します。  
  41. `````controls`````オプションは、各キーが作用するアクションタイプの名前であり、値が元のアクションオブジェクトを受け取る関数であるオブジェクトとして渡す必要があります。これは、評価が続行されるべき時に解決される約束を返すか、値を返す必要があります。値または解決された約束の値は、yield割り当ての戻り値に割り当てられます。コントロールハンドラーがundefinedを返す場合、実行は続行されません。  
  43. 詳細については、[`````@wordpress/redux-routine`````のドキュメント](https://github.com/WordPress/gutenberg/tree/HEAD/packages/redux-routine/README.md)を参照してください。
  46. #### 初期状態
  48. ストアのためのオプションのプリロードされた初期状態です。これを使用して、いくつかのシリアライズされた状態値やサーバーサイドで生成された状態を復元できます。  
  49.  <a name="generic-stores"></a>
  52. ## 一般的なストア
  54. `````@wordpress/data`````モジュールは、他のデータシステムとの統合や、データシステムに対するより直接的な制御が必要な状況のために、より高度で一般的なインターフェースを提供します。この場合、データストアは`````@wordpress/data`````の外部で実装され、その後3つの関数を介して接続される必要があります：  
  56. - `````getSelectors()`````: ストアに事前にマッピングされたセレクター関数のオブジェクトを返します。 
  57. - `````getActions()`````: ストアに事前にマッピングされたアクション関数のオブジェクトを返します。 
  58. - `````subscribe( listener: Function )`````: 状態の値が変更されるたびに呼び出される関数を登録します。  
  59.   - 次の違いを持つRedux[`````subscribe`````](https://redux.js.org/api/store#subscribelistener)として動作します：  
  60.     - アンソ subscribeを実装する必要はありません。レジストリはそれを使用しないためです。  
  61. - 1つのリスナー（レジストリ）のみをサポートする必要があります。  
  63. カスタムストアのために上記のインターフェースを実装することにより、レジストリと`````withSelect`````および`````withDispatch`````の高階コンポーネントをアプリケーションコードで使用する利点を得ることができます。これにより、既存のデータシステムや代替データシステムとのシームレスな統合が提供されます。  
  65. 既存のreduxストアを独自のリデューサー、ストアエンハンサー、ミドルウェアと統合することは、次のように実行できます：  
  67. *例：*  
  70. ``````bash
  71. import { register } from '@wordpress/data';
  72. import existingSelectors from './existing-app/selectors';
  73. import existingActions from './existing-app/actions';
  74. import createStore from './existing-app/store';
  76. const reduxStore = createStore();
  78. const mapValues = ( obj, callback ) =>
  79.    Object.entries( obj ).reduce(
  80.    ( acc, [ key, value ] ) => ( {
  81.    ...acc,
  82.    [ key ]: callback( value ),
  83.    } ),
  84.    {}
  85.    );
  87. const boundSelectors = mapValues(
  88.    existingSelectors,
  89.    ( selector ) =>
  90.    ( ...args ) =>
  91.    selector( reduxStore.getState(), ...args )
  92. );
  94. const boundActions = mapValues(
  95.    existingActions,
  96.    ( action ) =>
  97.    ( ...args ) =>
  98.    reduxStore.dispatch( action( ...args ) )
  99. );
  101. const genericStore = {
  102.    name: 'existing-app',
  103.    instantiate: () => ( {
  104.    getSelectors: () => boundSelectors,
  105.    getActions: () => boundActions,
  106.    subscribe: reduxStore.subscribe,
  107.    } ),
  108. };
  110. register( genericStore );
  111. `

完全にカスタムストアをゼロから実装することも可能です：

例： 

  1. import { register } from '@wordpress/data';
  3. function customStore() {
  4.    return {
  5.    name: 'custom-data',
  6.    instantiate: () => {
  7.    const listeners = new Set();
  8.    const prices = { hammer: 7.5 };
  10.    function storeChanged() {
  11.    for ( const listener of listeners ) {
  12.    listener();
  13.    }
  14.    }
  16.    function subscribe( listener ) {
  17.    listeners.add( listener );
  18.    return () => listeners.delete( listener );
  19.    }
  21.    const selectors = {
  22.    getPrice( itemName ) {
  23.    return prices[ itemName ];
  24.    },
  25.    };
  27.    const actions = {
  28.    setPrice( itemName, price ) {
  29.    prices[ itemName ] = price;
  30.    storeChanged();
  31.    },
  32.    };
  34.    return {
  35.    getSelectors: () => selectors,
  36.    getActions: () => actions,
  37.    subscribe,
  38.    };
  39.    },
  40.    };
  41. }
  43. register( customStore );

Reduxとの比較

データモジュールは、Reduxのコア原則やAPIメソッド名の多くを共有しています。実際、Reduxの上に実装されています。異なる点は、別々だが相互依存するストアを作成するためのモジュール化パターンを確立し、データアクセスの主要なエントリポイントとしてセレクター関数などの慣習を体系化することです。

この区別を補完するために高階コンポーネントが作成されました。withSelectとwithDispatchを分割する意図は、React Reduxではconnectの下でmapStateToPropsおよびmapDispatchToProps引数として結合されているため、ディスパッチが状態変更へのサブスクリプションに依存しないことをより正確に反映し、状態から派生した値をwithDispatchで使用できるようにすることです（高階コンポーネントの合成を介して）。

データモジュールには、リゾルバーやコントロールを通じて非同期副作用を処理するための組み込みソリューションもあります。これらは、https://redux.js.org/advanced/async-actionsのような標準redux非同期ソリューションとは若干異なります。

ReduxおよびReact Reduxとの具体的な実装の違い：

  • Reduxでは、subscribeリスナーは、状態の値が変更されたかどうかに関係なく、すべてのディスパッチで呼び出されます。
    • @wordpress/dataでは、サブスクライバーは状態が変更されたときのみ呼び出されます。
  • React Reduxでは、mapStateToProps関数はオブジェクトを返す必要があります。
    • @wordpress/dataでは、withSelectマッピング関数は、注入するプロパティがない場合、undefinedを返すことができます。
  • React Reduxでは、mapDispatchToProps引数はオブジェクトまたは関数として定義できます。
    • @wordpress/dataでは、withDispatch高階コンポーネントクリエイターには関数を渡す必要があります。

API

AsyncModeProvider

データモジュールコンポーネントの再レンダリングを同期モードと非同期モードの間で切り替えるために使用されるコンテキストプロバイダーコンポーネント。

使用法 

  1. import { useSelect, AsyncModeProvider } from '@wordpress/data';
  2. import { store as blockEditorStore } from '@wordpress/block-editor';
  4. function BlockCount() {
  5.    const count = useSelect( ( select ) => {
  6.    return select( blockEditorStore ).getBlockCount();
  7.    }, [] );
  9.    return count;
  10. }
  12. function App() {
  13.    return (
  14.    <AsyncModeProvider value={ true }>
  15.    <BlockCount />
  16.    </AsyncModeProvider>
  17.    );
  18. }

この例では、BlockCountコンポーネントが非同期に再レンダリングされます。

つまり、より重要なタスクが実行されている場合（入力にタイプするなど）、

再レンダリングはブラウザがアイドルになるまで遅延されます。

複数のレベルのAsyncModeProviderをネストして、レンダリング動作を微調整することが可能です。

パラメータ

  • props.value boolean: 非同期モードを有効にします。

戻り値

  • Component: レンダリングされるコンポーネントです。

combineReducers

combineReducersヘルパー関数は、値が異なるリデューシング関数のオブジェクトを、registerReducerに渡すことができる単一のリデューシング関数に変換します。

使用法 

  1. import { combineReducers, createReduxStore, register } from '@wordpress/data';
  3. const prices = ( state = {}, action ) => {
  4.    return action.type === 'SET_PRICE'
  5.    ? {
  6.    ...state,
  7.    [ action.item ]: action.price,
  8.    }
  9.    : state;
  10. };
  12. const discountPercent = ( state = 0, action ) => {
  13.    return action.type === 'START_SALE' ? action.discountPercent : state;
  14. };
  16. const store = createReduxStore( 'my-shop', {
  17.    reducer: combineReducers( {
  18.    prices,
  19.    discountPercent,
  20.    } ),
  21. } );
  22. register( store );

タイプ

  • import('./types').combineReducers

パラメータ

  • reducers Object: 結合する必要がある異なるリデューシング関数に対応する値を持つオブジェクトです。

戻り値

  • Function: reducersオブジェクト内のすべてのリデューサーを呼び出し、同じ形状の状態オブジェクトを構築するリデューサーです。

コントロール

未文書化の宣言。

createReduxStore

リデューサー、アクション、セレクター、コントロール、リゾルバーを説明するプロパティを含む、提供されたReduxストア構成のためのデータストア記述子を作成します。

使用法 

  1. import { createReduxStore } from '@wordpress/data';
  3. const store = createReduxStore( 'demo', {
  4.    reducer: ( state = 'OK' ) => state,
  5.    selectors: {
  6.    getValue: ( state ) => state,
  7.    },
  8. } );

パラメータ

  • key string: ユニークな名前空間識別子。
  • options ReduxStoreConfig<State,Actions,Selectors>: リデューサー、アクション、セレクター、リゾルバーを説明するプロパティを持つ登録されたストアオプションです。

戻り値

  • StoreDescriptor<ReduxStoreConfig<State,Actions,Selectors>>: ストアオブジェクトです。

createRegistry

オプションの初期ストア構成オブジェクトを与えられた新しいストアレジストリを作成します。

パラメータ

  • storeConfigs Object: 初期ストア構成。
  • parent Object?: 親レジストリ。

戻り値

  • WPDataRegistry: データレジストリです。

createRegistryControl

追加のカリー引数をregistryオブジェクトで受け取るコントロール関数を作成します。通常のコントロールは署名を持ちます 

  1. ( action ) => iteratorOrPromise;

コントロールがバインドされているactionで動作するのに対し、レジストリコントロールは署名を持ちます： 

  1. ( registry ) => ( action ) => iteratorOrPromise;

レジストリコントロールは通常、データを選択したり、登録されたストアにアクションをディスパッチするために使用されます。 

  2. *パラメータ*  
  4. - registryControl `````Function`````: レジストリオブジェクトを受け取り、コントロールを返す関数です。  
  6. *戻り値*  
  8. - `````Function`````: ストアに登録できるレジストリコントロールです。
  9.  <a name="createregistryselector"></a>
  12. ### createRegistrySelector
  14. レジストリ`````select`````関数で追加のカリー引数を受け取るセレクター関数を作成します。通常のセレクターは署名を持ちます  
  17. ``````bash
  18. ( state, ...selectorArgs ) => result;
  19. `

ストアのstateからデータを選択することを可能にしますが、レジストリセレクターは署名を持ちます： 

  1. ( select ) =>
  2.    ( state, ...selectorArgs ) =>
  3.    result;

他の登録されたストアからも選択をサポートします。

使用法 

  1. import { store as coreStore } from '@wordpress/core-data';
  2. import { store as editorStore } from '@wordpress/editor';
  4. const getCurrentPostId = createRegistrySelector( ( select ) => ( state ) => {
  5.    return select( editorStore ).getCurrentPostId();
  6. } );
  8. const getPostEdits = createRegistrySelector( ( select ) => ( state ) => {
  9.    // calling another registry selector just like any other function
  10.    const postType = getCurrentPostType( state );
  11.    const postId = getCurrentPostId( state );
  12.    return select( coreStore ).getEntityRecordEdits(
  13.    'postType',
  14.    postType,
  15.    postId
  16.    );
  17. } );
  2. （通常の非レジストリセレクター内でも機能します）そして、  
  4. レジストリを引数として渡す必要はありません。セレクターをストアに登録するときにレジストリバインディングが自動的に行われます。  
  6. *パラメータ*  
  8. - registrySelector `````Function`````: レジストリ`````select`````関数を受け取り、状態セレクターを返す関数です。  
  10. *戻り値*  
  12. - `````Function`````: ストアに登録できるレジストリセレクターです。
  13.  <a name="createselector"></a>
  16. ### createSelector
  18. 依存関係の配列とセレクターのパラメータに従って計算された値をキャッシュするメモ化されたセレクターを作成し、いずれかが変更されたときのみ値を再計算します。  
  20. *関連*  
  22. - `````rememo`````パッケージのドキュメント、`````createSelector`````関数が再エクスポートされています。  
  24. *パラメータ*  
  26. - selector `````Function`````: 状態とパラメータから値を計算するセレクター関数です。 
  27. - getDependants `````Function`````: “依存”オブジェクトの配列を返す関数です。  
  29. *戻り値*  
  31. - `````Function`````: 計算された戻り値をキャッシュする`````selector`````のメモ化バージョンです。
  32.  <a name="dispatch"></a>
  35. ### dispatch
  37. ストア記述子が与えられた場合、ストアのアクションクリエイターのオブジェクトを返します。アクションクリエイターを呼び出すと、それがディスパッチされ、状態値がそれに応じて更新されます。  
  39. 注意：ディスパッチによって返されたアクションクリエイターは、呼び出されると約束を返します。  
  41. *使用法*  
  44. ``````bash
  45. import { dispatch } from '@wordpress/data';
  46. import { store as myCustomStore } from 'my-custom-store';
  48. dispatch( myCustomStore ).setPrice( 'hammer', 9.75 );
  49. `

パラメータ

  • storeNameOrDescriptor StoreNameOrDescriptor: ストア記述子。ストア名を渡すレガシー呼び出し規約もサポートされています。

戻り値

  • DispatchReturn< StoreNameOrDescriptor >: アクションクリエイターを含むオブジェクトです。

プラグイン

レジストリで使用できるプラグインのオブジェクトです。

関連

タイプ

  • Object

register

標準の@wordpress/dataストア記述子を登録します。

使用法 

  1. import { createReduxStore, register } from '@wordpress/data';
  3. const store = createReduxStore( 'demo', {
  4.    reducer: ( state = 'OK' ) => state,
  5.    selectors: {
  6.    getValue: ( state ) => state,
  7.    },
  8. } );
  9. register( store );

パラメータ

  • store StoreDescriptor: ストア記述子です。

registerGenericStore

非推奨 register( storeDescriptor )を使用してください。
一般的なストアインスタンスを登録します。

パラメータ

  • name string: ストアレジストリ名。
  • store Object: ストアインスタンス（{ getSelectors, getActions, subscribe }）。

registerStore

非推奨 registerを使用してください。
標準の@wordpress/dataストアを登録します。

パラメータ

  • storeName string: ストアのユニークな名前空間識別子。
  • options Object: ストアの説明（リデューサー、アクション、セレクター、リゾルバー）。

戻り値

  • Object: 登録されたストアオブジェクトです。

RegistryConsumer

提供されたregistryを子コンポーネントに公開するカスタムReactコンテキストコンシューマです。RegistryProviderと一緒に使用されます。

ReactコンテキストAPIについての詳細は、こちらを参照してください：https://react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context

使用法 

  1. import {
  2.   RegistryProvider,
  3.   RegistryConsumer,
  4.   createRegistry
  5. } from '@wordpress/data';
  7. const registry = createRegistry( {} );
  9. const App = ( { props } ) => {
  10.   return <RegistryProvider value={ registry }>
  11.    <div>Hello There</div>
  12.    <RegistryConsumer>
  13.    { ( registry ) => (
  14.    <ComponentUsingRegistry
  15.    { ...props }
  16.    registry={ registry }
  17.    ) }
  18.    </RegistryConsumer>
  19.   </RegistryProvider>
  20. }

RegistryProvider

提供されたregistryを子コンポーネントに公開するカスタムコンテキストプロバイダーです。

例については、
RegistryConsumerのドキュメントを参照してください。

resolveSelect

ストア記述子が与えられた場合、ストアのセレクターを状態に事前にバインドしたオブジェクトを返します。これにより、追加の引数を供給するだけで済み、リゾルバーが実行された後に最終的な値に解決される約束を返すように修正されます。

使用法 

  1. import { resolveSelect } from '@wordpress/data';
  2. import { store as myCustomStore } from 'my-custom-store';
  4. resolveSelect( myCustomStore ).getPrice( 'hammer' ).then( console.log );

パラメータ

  • storeNameOrDescriptor StoreDescriptor|string: ストア記述子。ストア名を渡すレガシー呼び出し規約もサポートされています。

戻り値

  • Object: ストアの約束でラップされたセレクターを含むオブジェクトです。

select

ストア記述子が与えられた場合、ストアのセレクターのオブジェクトを返します。セレクター関数は、現在の状態を自動的に渡すように事前にバインドされています。消費者として、適用可能な場合はセレクターの引数のみを渡す必要があります。

使用法 

  1. import { select } from '@wordpress/data';
  2. import { store as myCustomStore } from 'my-custom-store';
  4. select( myCustomStore ).getPrice( 'hammer' );

パラメータ

  • storeNameOrDescriptor string | T: ストア記述子。ストア名を渡すレガシー呼び出し規約もサポートされています。

戻り値

  • CurriedSelectorsOf< T >: ストアのセレクターを含むオブジェクトです。

subscribe

リスナー関数が与えられた場合、登録されたストアの1つの状態値が変更されるたびにその関数が呼び出されます。オプションのstoreNameOrDescriptorパラメータを指定すると、リスナー関数はその特定の登録ストアの更新時にのみ呼び出されます。

この関数は、サブスクリプションを停止するために使用されるunsubscribe関数を返します。

使用法 

  1. import { subscribe } from '@wordpress/data';
  3. const unsubscribe = subscribe( () => {
  4.    // You could use this opportunity to test whether the derived result of a
  5.    // selector has subsequently changed as the result of a state update.
  6. } );
  8. // Later, if necessary...
  9. unsubscribe();

パラメータ

  • listener Function: コールバック関数です。
  • storeNameOrDescriptor string|StoreDescriptor?: オプションのストア名です。

suspendSelect

ストア記述子が与えられた場合、ストアのセレクターを状態に事前にバインドしたオブジェクトを返します。これにより、追加の引数を供給するだけで済み、セレクターがまだ解決されていない場合に約束をスローするように修正されます。

パラメータ

  • storeNameOrDescriptor StoreDescriptor|string: ストア記述子。ストア名を渡すレガシー呼び出し規約もサポートされています。

戻り値

  • Object: ストアのサスペンスでラップされたセレクターを含むオブジェクトです。

use

レジストリを拡張して、指定されたプラグインによって提供される機能を継承します。プラグインは、レジストリのプロパティに一致するプロパティを持つオブジェクトで、デフォルトのレジストリ動作を拡張するためにマージされます。

パラメータ

  • plugin Object: プラグインオブジェクトです。

useDispatch

現在のレジストリディスパッチアクションクリエイターを返すカスタムReactフックです。

注意：このフックを使用するコンポーネントは、RegistryProviderのコンテキスト内に存在する必要があります。

使用法

これは、サーバーから動的データを取得する必要があるパターンを示しています 

  3. ``````bash
  4. import { useCallback } from 'react';
  5. import { useDispatch, useSelect } from '@wordpress/data';
  6. import { store as myCustomStore } from 'my-custom-store';
  8. function Button( { onClick, children } ) {
  9.    return (
  10.    <button type="button" onClick={ onClick }>
  11.    { children }
  12.    </button>
  13.    );
  14. }
  16. const SaleButton = ( { children } ) => {
  17.    const { stockNumber } = useSelect(
  18.    ( select ) => select( myCustomStore ).getStockNumber(),
  19.    []
  20.    );
  21.    const { startSale } = useDispatch( myCustomStore );
  22.    const onClick = useCallback( () => {
  23.    const discountPercent = stockNumber > 50 ? 10 : 20;
  24.    startSale( discountPercent );
  25.    }, [ stockNumber ] );
  26.    return <Button onClick={ onClick }>{ children }</Button>;
  27. };
  29. // Rendered somewhere in the application:
  30. //
  31. // <SaleButton>Start Sale!</SaleButton>
  32. `

パラメータ

  • storeNameOrDescriptor [StoreNameOrDescriptor]: アクションクリエイターを取得するためのストア名またはその記述子をオプションで提供します。提供されない場合、registry.dispatch関数が代わりに返されます。

戻り値

  • UseDispatchReturn<StoreNameOrDescriptor>: カスタムReactフックです。

useRegistry

レジストリコンテキストを使用するために公開するカスタムReactフックです。

これは、Registry Providerを介して提供されたregistry値を、このフックを実装するコンポーネントに公開します。

useContext Reactフックと同様に動作します。

注意：一般的に、useRegistryは実装に必要ない低レベルのフックです。@wordpress/data APIとのほとんどの相互作用は、useSelectフック、またはwithSelectおよびwithDispatchの高階コンポーネントを介して実行できます。

使用法 

  1. import { RegistryProvider, createRegistry, useRegistry } from '@wordpress/data';
  3. const registry = createRegistry( {} );
  5. const SomeChildUsingRegistry = ( props ) => {
  6.    const registry = useRegistry();
  7.    // ...logic implementing the registry in other react hooks.
  8. };
  10. const ParentProvidingRegistry = ( props ) => {
  11.    return (
  12.    <RegistryProvider value={ registry }>
  13.    <SomeChildUsingRegistry { ...props } />
  14.    </RegistryProvider>
  15.    );
  16. };

戻り値

  • Function: レジストリコンテキスト値を公開するカスタムReactフックです。

useSelect

登録されたセレクターからプロパティを取得するためのカスタムReactフックです。

一般的に、このカスタムReactフックはフックのルールに従います。

使用法 

  1. import { useSelect } from '@wordpress/data';
  2. import { store as myCustomStore } from 'my-custom-store';
  4. function HammerPriceDisplay( { currency } ) {
  5.    const price = useSelect(
  6.    ( select ) => {
  7.    return select( myCustomStore ).getPrice( 'hammer', currency );
  8.    },
  9.    [ currency ]
  10.    );
  11.    return new Intl.NumberFormat( 'en-US', {
  12.    style: 'currency',
  13.    currency,
  14.    } ).format( price );
  15. }
  17. // Rendered in the application:
  18. // <HammerPriceDisplay currency="USD" />

上記の例では、HammerPriceDisplayがアプリケーションにレンダリングされると、価格はmapSelectコールバックを使用してストア状態から取得されます。通貨プロパティが変更されると、

その通貨の状態内の価格が取得されます。通貨プロパティが変更されず、他のプロパティが変更される場合、依存関係が通貨だけであるため、価格は変更されません。

データがイベントコールバック内でのみ使用される場合、データはレンダリング時に取得されるべきではないため、セレクター関数を取得する方が便利です。

レンダリング時にセレクターを呼び出す際にuseSelectをこのように使用しないでください

データ変更時にコンポーネントが再レンダリングされないためです。 

  1. import { useSelect } from '@wordpress/data';
  2. import { store as myCustomStore } from 'my-custom-store';
  4. function Paste( { children } ) {
  5.    const { getSettings } = useSelect( myCustomStore );
  6.    function onPaste() {
  7.    // Do something with the settings.
  8.    const settings = getSettings();
  9.    }
  10.    return <div onPaste={ onPaste }>{ children }</div>;
  11. }

パラメータ

  • mapSelect T: 状態変更ごとに呼び出される関数。返された値は、このフックを実装するコンポーネントに公開されます。関数は、最初の引数にregistry.selectメソッドを、2番目の引数にregistryを受け取ります。ストアキーが渡されると、ストアのすべてのセレクターが返されます。これは、要素ツリーを作成するために必要なデータではなく、イベントコールバック内でこれらのセレクターを使用するためのものです。
  • deps unknown[]: 提供される場合、これはmapSelectをメモ化し、依存関係が変更されない限り、同じmapSelectが状態変更ごとに呼び出されます。

戻り値

  • UseSelectReturn<T>: カスタムReactフックです。

useSuspenseSelect

  2. *パラメータ*  
  4. - mapSelect `````T`````: 状態変更ごとに呼び出される関数。返された値は、このフックを使用するコンポーネントに公開されます。関数は、最初の引数に`````registry.suspendSelect`````メソッドを、2番目の引数に`````registry`````を受け取ります。 
  5. - deps `````Array`````: 依存関係配列で、`````mapSelect`````をメモ化するために使用され、依存関係が変更されない限り、同じ`````mapSelect`````が状態変更ごとに呼び出されます。  
  7. *戻り値*  
  9. - `````ReturnType<T>`````: `````mapSelect`````関数によって返されるデータオブジェクトです。
  10.  <a name="withdispatch"></a>
  13. ### withDispatch
  15. 登録されたアクションクリエイターを使用してディスパッチプロパティを追加するために使用される高階コンポーネントです。  
  17. *使用法*  
  20. ``````bash
  21. function Button( { onClick, children } ) {
  22.    return (
  23.    <button type="button" onClick={ onClick }>
  24.    { children }
  25.    </button>
  26.    );
  27. }
  29. import { withDispatch } from '@wordpress/data';
  30. import { store as myCustomStore } from 'my-custom-store';
  32. const SaleButton = withDispatch( ( dispatch, ownProps ) => {
  33.    const { startSale } = dispatch( myCustomStore );
  34.    const { discountPercent } = ownProps;
  36.    return {
  37.    onClick() {
  38.    startSale( discountPercent );
  39.    },
  40.    };
  41. } )( Button );
  43. // Rendered in the application:
  44. //
  45. // <SaleButton discountPercent="20">Start Sale!</SaleButton>
  46. `

ほとんどのケースでは、mapDispatchToPropsに渡される最初の2つのパラメータを使用するだけで十分です。

ただし、registryオブジェクトを使用してコンポーネントのパフォーマンスを最適化するための非常に高度な使用例があるかもしれません。select関数をレジストリから使用することは、イベントが発生したときにストアから動的データを取得する必要がある場合に便利ですが、同時にそれを使用してコンポーネントをレンダリングすることはありません。このようなシナリオでは、withSelect高階コンポーネントを使用してそのプロパティを計算することを避けることができ、頻繁な値の変更によって引き起こされる不必要な再レンダリングを回避できます。 

  3. ``````bash
  4. function Button( { onClick, children } ) {
  5.    return (
  6.    <button type="button" onClick={ onClick }>
  7.    { children }
  8.    </button>
  9.    );
  10. }
  12. import { withDispatch } from '@wordpress/data';
  13. import { store as myCustomStore } from 'my-custom-store';
  15. const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => {
  16.    // Stock number changes frequently.
  17.    const { getStockNumber } = select( myCustomStore );
  18.    const { startSale } = dispatch( myCustomStore );
  19.    return {
  20.    onClick() {
  21.    const discountPercent = getStockNumber() > 50 ? 10 : 20;
  22.    startSale( discountPercent );
  23.    },
  24.    };
  25. } )( Button );
  27. // Rendered in the application:
  28. //
  29. //  <SaleButton>Start Sale!</SaleButton>
  30. `

注意： mapDispatchToProps関数が常に同じキーを持つオブジェクトを返すことが重要です。たとえば、異なる値が返される条件を含めるべきではありません。

パラメータ

  • mapDispatchToProps Function: プロパティ名のオブジェクトを返す関数で、値はディスパッチバウンドアクションクリエイターであるか、コンポーネントのプロパティを使用して呼び出され、アクションクリエイターを返す関数です。

戻り値

  • ComponentType: マージされたディスパッチャープロパティを持つ強化されたコンポーネントです。

withRegistry

現在のレジストリコンテキストをregistryプロパティとして渡して元のコンポーネントをレンダリングする高階コンポーネントです。

パラメータ

  • OriginalComponent Component: 元のコンポーネントです。

戻り値

  • Component: 強化されたコンポーネントです。

withSelect

登録されたセレクターを使用して状態派生プロパティを注入するために使用される高階コンポーネントです。

使用法 

  1. import { withSelect } from '@wordpress/data';
  2. import { store as myCustomStore } from 'my-custom-store';
  4. function PriceDisplay( { price, currency } ) {
  5.    return new Intl.NumberFormat( 'en-US', {
  6.    style: 'currency',
  7.    currency,
  8.    } ).format( price );
  9. }
  11. const HammerPriceDisplay = withSelect( ( select, ownProps ) => {
  12.    const { getPrice } = select( myCustomStore );
  13.    const { currency } = ownProps;
  15.    return {
  16.    price: getPrice( 'hammer', currency ),
  17.    };
  18. } )( PriceDisplay );
  20. // Rendered in the application:
  21. //
  22. //  <HammerPriceDisplay currency="USD" />

上記の例では、HammerPriceDisplayがアプリケーションにレンダリングされると、価格は基盤となるPriceDisplayコンポーネントに渡され、ハンマーの価格がストアで変更されると自動的に更新されます。

パラメータ

  • mapSelectToProps Function: 状態変更ごとに呼び出される関数で、コンポーネントのプロパティとマージするプロパティのオブジェクトを返すことが期待されます。

戻り値

  • ComponentType: マージされた状態データプロパティを持つ強化されたコンポーネントです。

batch

  2. - セレクターは更新された状態で呼び出されます。  
  3. - セレクターが前の値（厳密な等価性）と異なる値を返す場合、コンポーネントは再レンダリングされます。  
  5. アプリケーションが成長するにつれて、これはコストがかかる可能性があるため、可能な限りこれらの両方を実行しないようにすることが重要です。これらの状況の1つは、相互作用が状態を適切に更新するために複数の連続した`````dispatch`````呼び出しを必要とする場合に発生します。`````dispatch`````を呼び出すたびにコンポーネントを再レンダリングしないようにするために、連続したディスパッチ呼び出しを`````batch`````でラップすることができ、これによりコンポーネントは選択子を呼び出し、シーケンスの最後に1回だけ再レンダリングされます。  
  7. *使用法*  
  10. ``````bash
  11. import { useRegistry } from '@wordpress/data';
  13. function Component() {
  14.    const registry = useRegistry();
  16.    function callback() {
  17.    // This will only rerender the components once.
  18.    registry.batch( () => {
  19.    registry.dispatch( someStore ).someAction();
  20.    registry.dispatch( someStore ).someOtherAction();
  21.    } );
  22.    }
  24.    return <button onClick={ callback }>Click me</button>;
  25. }
  26. `

セレクター

wp.data.select( 'core' )によって返されるオブジェクトで利用可能な次のセレクターです。

例 

  1. import { store as coreDataStore } from '@wordpress/core-data';
  2. import { useSelect } from '@wordpress/data';
  4. function Component() {
  5.    const result = useSelect( ( select ) => {
  6.    const query = { per_page: 20 };
  7.    const selectorArgs = [ 'postType', 'page', query ];
  9.    return {
  10.    pages: select( coreDataStore ).getEntityRecords( ...selectorArgs ),
  11.    hasStartedResolution: select( coreDataStore ).hasStartedResolution(
  12.    'getEntityRecords', // _selectorName_
  13.    selectorArgs
  14.    ),
  15.    hasFinishedResolution: select(
  16.    coreDataStore
  17.    ).hasFinishedResolution( 'getEntityRecords', selectorArgs ),
  18.    isResolving: select( coreDataStore ).isResolving(
  19.    'getEntityRecords',
  20.    selectorArgs
  21.    ),
  22.    };
  23.    } );
  25.    if ( result.hasStartedResolution ) {
  26.    return <>Fetching data...</>;
  27.    }
  29.    if ( result.isResolving ) {
  30.    return (
  31.    <>
  32.    {
  33.    // show a spinner
  34.    }
  35.    </>
  36.    );
  37.    }
  39.    if ( result.hasFinishedResolution ) {
  40.    return (
  41.    <>
  42.    {
  43.    // data is ready
  44.    }
  45.    </>
  46.    );
  47.    }
  48. }

hasFinishedResolution

指定されたセレクター名と引数セットの解決が完了した場合はtrueを返します。

パラメータ

  • state State: データ状態です。
  • selectorName string: セレクター名です。
  • args unknown[]?: セレクターに渡される引数です。

戻り値

  • boolean: 解決が完了したかどうかです。

hasStartedResolution

指定されたセレクター名と引数セットの解決がすでにトリガーされている場合はtrueを返します。

パラメータ

  • state State: データ状態です。
  • selectorName string: セレクター名です。
  • args unknown[]?: セレクターに渡される引数です。

戻り値

  • boolean: 解決がトリガーされたかどうかです。

isResolving

指定されたセレクター名と引数セットの解決がトリガーされているが、まだ完了していない場合はtrueを返します。

パラメータ

  • state State: データ状態です。
  • selectorName string: セレクター名です。
  • args unknown[]?: セレクターに渡される引数です。

戻り値

  • boolean: 解決が進行中かどうかです。

セレクタ引数の正規化

特定の状況では、セレクタ/リゾルバのペアリングの特定の 呼び出し に渡される引数を正規化する必要がある場合があります。

各リゾルバは、内部状態にキャッシュされた解決ステータスを持ち、キーは 呼び出し 時にセレクタに供給された引数です。

例えば、単一の引数を持つセレクタの場合、関連するリゾルバは次のキャッシュキーを生成します: [ 123 ]。

このキャッシュは、特定のリゾルバの解決ステータスを決定するために使用されます これは、不要な追加のリゾルバの呼び出しを避けるために使用されます（これらはしばしばネットワークリクエストなどの「高コスト」な操作を行います）。

その結果、セレクタを呼び出す際に引数が 一貫性 を保つことが重要です。例えば、デフォルト では、これらの2つの呼び出しは同じキーを使用してキャッシュされませんが、実際には同一である可能性があります: 

  1. // Arg as number
  2. getSomeDataById( 123 );
  4. // Arg as string
  5. getSomeDataById( '123' );

これは、unstableNormalizeArgs プロパティを利用して、一貫性を保証し、呼び出し元が不正な型を渡すことから保護する機会です。

例

以下のセレクタの 3番目 の引数は Number であることを意図しています: 

  1. const getItemsSelector = ( name, type, id ) => {
  2.    return state.items[ name ][ type ][ id ] || null;
  3. };

しかし、id パラメータが String として渡される可能性があります。この場合、unstableNormalizeArgs メソッド（プロパティ）を セレクタ に定義して、引数を望ましい型に強制することができます。たとえそれらが「不正に」提供されても: 

  1. // Define normalization method.
  2. getItemsSelector.__unstableNormalizeArgs = ( args ) {
  3.    // "id" argument at the 2nd index
  4.    if (args[2] && typeof args[2] === 'string' ) {
  5.    args[2] === Number(args[2]);
  6.    }
  8.    return args;
  9. }

これが整っていれば、次のコードは一貫して動作します: 

  1. const getItemsSelector = ( name, type, id ) => {
  2.    // here 'id' is now guaranteed to be a number.
  3.    return state.items[ name ][ type ][ id ] || null;
  4. };
  6. const getItemsResolver = ( name, type, id ) => {
  7.    // 'id' is also guaranteed to be a number in the resolver.
  8.    return {};
  9. };
  11. registry.registerStore( 'store', {
  12.    // ...
  13.    selectors: {
  14.    getItems: getItemsSelector,
  15.    },
  16.    resolvers: {
  17.    getItems: getItemsResolver,
  18.    },
  19. } );
  21. // Call with correct number type.
  22. registry.select( 'store' ).getItems( 'foo', 'bar', 54 );
  24. // Call with the wrong string type, **but** here we have avoided an
  25. // wanted resolver call because '54' is guaranteed to have been
  26. // coerced to a number by the `__unstableNormalizeArgs` method.
  27. registry.select( 'store' ).getItems( 'foo', 'bar', '54' );

特定のセレクタ呼び出しの引数の一貫性を確保することは、データ層のパフォーマンスを向上させるための重要な最適化です。しかし、この種の問題は、通常、セレクタが引数に可変型を使用しないようにすることで回避できます。

さらに進む

このパッケージへの貢献

これはグーテンベルクプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやグーテンベルク全体への貢献について詳しく知りたい場合は、プロジェクトの主な貢献者ガイドをお読みください。