イベントベースのデータアクションを使用する

[アーティクル]
07/26/2024

この記事は、イベントベースのデータアクションを使用する方法について説明します。

シナリオによっては、ページが最初に読み込まれるとき、データアクションを実行しない場合があります。代わりに、クライアント上のイベントに応じて動的に実行します。たとえば、ボタンのクリックによって製品を顧客のカートに追加したり、テキスト入力の変更に応じて検索結果を表示したり、また時間ベースのイベントに応じてバナーテキストを更新することができます。

例

次の例では、ユーザーがボタンをクリックするとき、ごく基本的なモジュールが製品情報を読み込みます。

次のコードは、ユーザーがクリックできるボタンを含む反応コンポーネントを示しています。

// product-button.tsx
import * as React from 'react';

/**
 * ProductAddToCart component
 */
class ProductButton extends React.Component {
    public render(): JSX.Element {
        return (
            <div>
                <button onClick={_getProductInfo}>Get Product Info!</button>
            </div>
        );
    }

    // On-Click handler function
    private _getProductInfo = () => {
        console.log('We need to get the product!');
    }
}

export default ProductButton;

現在、このコンポーネントは、ボタンをクリックするとメッセージをコンソールに記録します。その動作をデータアクションに置き換えるには、次の 3 つを行う必要があります。

データアクションとその入力クラスをインポートします。
データアクションに対する入力を作成します。
データアクションを呼び出します。

次のコードは、ボタンがクリックされたときに製品を呼び出す、更新された反応コンポーネントを示しています。

// product-button.tsx
import * as React from 'react';

// Import our data action and input class
// NOTE: Generally the data action is the DEFAULT export of the file it was written in.
import getProductDataAction, { ProductInput } from '../../actions/get-product';

/**
 * ProductAddToCart component
 */
class ProductButton extends React.Component {
    public render(): JSX.Element {
        return (
            <div>
                <button onClick={_getProductInfo}>Get Product Info!</button>
            </div>
        );
    }

    // On-click handler
    private _getProductInfo = async() => {
        // Create the input for our data-action
        const actionInput = new ProductInput('12345');
        
        // Run and await the result of the data action
        const product = await getProductDataAction(actionInput, {callerContext: this.props.context.actionContext});
        
        // Log the result to the console
        console.log(product);
    }
}

export default ProductButton;

メモ

この例では、ハードコーディングされた productId 値を使用します。ただし、更新することで、productId 値をテキスト入力またはモジュールの構成プロパティから読み取ることができます。