インストール

Nodeがまだインストールされていない場合は、インストールしてください。

プロジェクトにモジュールをインストールするには、npmを使用します: 

  1. npm install @wordpress/redux-routine

@wordpress/redux-routineは、JavaScript言語の2つのモダンな機能であるPromisesとGeneratorsの両方を活用しています。古いブラウザ（Internet Explorer 11以前）をサポートする必要がある場合は、自分でポリフィルを提供する必要があります。

使用法

  2. 例えば、ネットワークリクエストを発行する必要がある一般的なケースを考えてみましょう。ミドルウェアを作成する際に、ネットワークリクエストを制御ハンドラとして定義できます。  
  5. ``````bash
  6. import { combineReducers, createStore, applyMiddleware } from 'redux';
  7. import createMiddleware from '@wordpress/redux-routine';
  9. const middleware = createMiddleware( {
  10.    async FETCH_JSON( action ) {
  11.    const response = await window.fetch( action.url );
  12.    return response.json();
  13.    },
  14. } );
  16. function temperature( state = null, action ) {
  17.    switch ( action.type ) {
  18.    case 'SET_TEMPERATURE':
  19.    return action.temperature;
  20.    }
  22.    return state;
  23. }
  25. const reducer = combineReducers( { temperature } );
  27. const store = createStore( reducer, applyMiddleware( middleware ) );
  29. function* retrieveTemperature() {
  30.    const result = yield { type: 'FETCH_JSON', url: 'https://' };
  31.    return { type: 'SET_TEMPERATURE', temperature: result.value };
  32. }
  34. store.dispatch( retrieveTemperature() );
  35. `

この例では、retrieveTemperatureをディスパッチすると、制御ハンドラが有効になり、ネットワークリクエストが発行され、その結果がresult変数に割り当てられます。リクエストが完了した後にのみ、アクションクリエーターはSET_TEMPERATUREアクションタイプを返す処理を続行します。

API

デフォルト

アクションタイプごとに動作する制御のオブジェクトを与えることで、Reduxミドルウェアを作成します。各キーはアクションタイプであり、値はアクションの評価が続行されるべきときに解決されるPromiseまたは値を返す関数です。値または解決されたPromiseの値は、yieldの戻り値に割り当てられます。制御ハンドラがundefinedを返す場合、実行は続行されません。

パラメータ

  • controls Record<string, (value: import('redux').AnyAction) => Promise<boolean> | boolean>: 制御ハンドラのオブジェクト。

戻り値

  • import('redux').Middleware: コルーチンランタイム

動機

  2. 主な動機には、他にも以下が含まれます:  
  4. - **テスト可能性**: アクションクリエーターがプレーンなアクションオブジェクトをyieldするため、その解決の動作はテストで簡単に置き換え可能です。 
  5. - **制御された柔軟性**: アクションタイプの表現力と意図性を犠牲にすることなく、制御フローを実装できます。thunksやpromisesのような他のソリューションは究極の柔軟性を促進しますが、アクションタイプと偶発的な実装の間の深い結合を通じて保守性の犠牲を伴います。 
  6. - データフローを表現するための**共通のドメイン言語**: 制御が中央で定義されているため、新しい制御ハンドラを追加する際の開発チームの意識的な決定が必要です。
  7.  <a name="testing"></a>
  10. ## テスト
  12. アクションクリエーターはプレーンなアクションオブジェクトの反復可能なジェネレーターを返すため、テストは非常に簡単です。  
  14. 再度、上記の例を考えてみましょう:  
  17. ``````bash
  18. function* retrieveTemperature() {
  19.    const result = yield { type: 'FETCH_JSON', url: 'https://' };
  20.    return { type: 'SET_TEMPERATURE', temperature: result.value };
  21. }
  22. `

テストケース（Nodeのassert組み込みモジュールを使用）を次のように記述できます: 

  1. import { deepEqual } from 'assert';
  3. const action = retrieveTemperature();
  5. deepEqual( action.next().value, {
  6.    type: 'FETCH_JSON',
  7.    url: 'https://',
  8. } );
  10. const jsonResult = { value: 10 };
  11. deepEqual( action.next( jsonResult ).value, {
  12.    type: 'SET_TEMPERATURE',
  13.    temperature: 10,
  14. } );

アクションクリエーターがyieldされた結果を変数に割り当てない場合、Array.fromを使用してアクションクリエーターの結果から配列を作成することもできます。

このパッケージへの貢献

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

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