監視可能なデータ アクションを作成する
この記事では、Microsoft Dynamics 365 Commerce で監視可能なデータ アクションを作成する方法について説明します。
監視可能なデータ アクションは、実行中のデータ アクションの状態を追跡するために使用されます。 この機能は、データ アクションの現在の状態に応じてロジックを実行するか、ユーザー インターフェイス (UI) をレンダリングする必要がある場合に役立ちます。 監視可能なデータ アクションは、AsyncResult という名前の promise のような特別なクラスを使用します。 このクラスは、標準の promise に「オブザーバー」機能を追加します。
次の例は、AsyncResult クラスを活用する方法を示しています。 このデータ アクションは、文字列を返すまで 3 秒待ちます。
// test-action.ts
/**
* Test action method for TestAsync action
* @param input The action input
* @param context The action context
*/
const testAction = async (input: TestAsyncActionInput, context: IActionContext): Promise<string> => {
await new Promise(resolve => {
setTimeout(
() => {
resolve();
}, 3000);
});
// Flag-based error scenario
if (input.shouldError) {
throw new Error('Oops');
}
return 'foo';
};
/**
* Test Action Input
*/
export class TestAsyncActionInput implements IActionInput {
public shouldError: Boolean = false;
constructor(shouldError?: Boolean) {
this.shouldError = shouldError || this.shouldError;
}
public getCacheKey = () => `test`;
public getCacheObjectType = () => 'test';
public dataCacheType = (): Msdyn365.CacheType => 'none';
}
/**
* Test createInput method for TestAsync Action
*/
const createInput = () => {
return new TestAsyncActionInput();
};
この例では、データ アクションが送信アプリケーション プログラミング インターフェイス (API) の呼び出しをシミュレートします。 また、失敗のシミュレーションを許可するために設定できるフラグも含まれています。 シナリオによっては、データ アクションの状態について更新を送信するモジュールを作成できます。 その目的で通常のデータ アクションを使用することはできません。
監視可能なデータ アクションを作成する
監視可能なデータ アクションを作成するには、データ アクション作成用の新しい createObservableDataAction ユーティリティ メソッドを使用します。
export default createObservableDataAction({
input: createInput,
action: <IAction<string>>testAction
});
createObservableDataAction メソッドは、IObservableAction インターフェイスを返します。 IObservableAction インターフェイスは、データ アクションの状態とエラー プロパティを含む追加データを提供する AsyncResult クラスを返します。
次の例に示すように、モックを作成してデータ アクションをテストすることができます。
// test-module.tsx
import { observer } from 'mobx-react';
import * as React from 'react';
import { IAsyncTestModuleData } from './async-test-module.data';
import { IAsyncTestModuleProps } from './async-test-module.props.autogenerated';
import testAction, { TestAsyncActionInput } from './actions/async-test-action';
/**
* TestModule Component
* @extends {React.PureComponent<IAsyncTestModuleProps<IAsyncTestModuleData>>}
*/
@observer
class AsyncTestModule extends React.PureComponent<IAsyncTestModuleProps<IAsyncTestModuleData>> {
constructor(props: IAsyncTestModuleProps<IAsyncTestModuleData>) {
super(props);
}
public render(): JSX.Element {
return (
<div className='row'>
<div className='col'>
<h1>Status: { this.props.data.testResult.status }</h1>
<h1>Result: { this.props.data.testResult.result }</h1>
{ this.props.data.testResult.error &&
<h1>Error: { this.props.data.testResult.error.message }</h1>
}
<button
// tslint:disable:jsx-no-lambda
// tslint:disable-next-line:react-this-binding-issue
onClick={(e) => this._clientCall(e)}
> Run on client
</button>
<button
// tslint:disable:jsx-no-lambda
// tslint:disable-next-line:react-this-binding-issue
onClick={(e) => this._clientCall(e, true)}
> Error on client
</button>
</div>
</div>
);
}
}
export default AsyncTestModule;
次の例は、以前に作成されたサンプルの監視可能なデータ アクションを登録するサンプル モジュールの定義を示しています。
// test-module.definition.json
{
"$type": "contentModule",
"friendlyName": "test-module",
"name": "test-module",
"description": "Module for testing observable data actions",
"categories": ["test-module"],
"tags": ["samples"],
"dataActions": {
"testResult":{
"path": "./actions/test-action",
"runOn": "client"
}
}
}
モジュール data.ts ファイル内でデータ アクションを追加する場合、observableDataAction オブジェクトを返すすべてのデータ アクションが AsyncResult クラスでラップされていることを確認してください。 これにより、モジュールの書き込み時に正しい入力が保証されます。
// test-module.data.ts
import { AsyncResult } from '@msdyn365-commerce/retail-proxy';
export interface IAsyncTestModuleData {
testResult: AsyncResult<string>;
}
データ アクションが AsyncResult クラスでラップされるとき (上の例のように)、モジュールは status、result、および error プロパティにアクセスできるようになりました。 status プロパティには、データ アクションの現在の状態が含まれており、「成功」、「読み込み中」、または「失敗」のいずれかになります。 result プロパティには、アクションが成功した場合に返されるデータが含まれています。 データ アクションがエラーをスローした場合は、result プロパティは入力されません。 代わりに、error プロパティを使用してエラーの詳細を表示することができます。
監視可能なデータ アクションが提供する status、result、および error プロパティを活用することで、モジュール内の複雑なシナリオをよりよく処理することができます。 例には、データ アクション呼び出しの実行中の読み込み画面の表示、および失敗したデータ アクションに応じたコンテキスト エラー メッセージの表示が含まれています。