状態管理

一部のストアフロントアプリケーションでは、グローバル状態 (global state) を管理する方法が要求されます。このために、Redux や MobX などの多くの状態管理ライブラリが提供されています。Salesforce では特定の状態管理ライブラリを推奨していません。状態管理ライブラリを使用しなくても PWA Kit アプリを作成することができます。

状態情報はいつでも props を使用してコンポーネントに渡すことができますが、React の高度な機能を使用して状態管理を行いたい場合のために、このガイドではその他のアプローチも説明しています。

コンポーネント間で状態 (state) を共有するもっとも簡単な方法は、props を通じて状態情報をコンポーネントに渡す方法です。そのコンポーネントは、状態データにアクセスする必要のあるすべてのコンポーネントの上位であることが必要です。この手法は React のドキュメントに詳細に説明されており、lifting state up (state のリフトアップ) と呼ばれています。

React の Context API を使用すると、多数のコンポーネントにデータを提供するプロセスを簡略化できます。アプリのコンポーネントツリーの各レベルで props を通じてデータを手動で渡す必要はありません。

以下に、すべてのコンポーネントのラッパーとして機能するコンポーネントとともに React Context API を使用して、すべてのコンポーネントに共有状態データを提供する例を示します。

まず、次の 2 つのコンテキストオブジェクトをもつ GlobalState という名前のコンポーネントを作成します:

  1. GlobalStateContext: このオブジェクトにはグローバル状態データを保管します。
  2. GlobalDispatchContext: dispatch 関数。reducer 関数を通じてグローバル状態の更新されたスナップショットを返します。

各コンテキストオブジェクトには <Provider> コンポーネントが付属しており、これによりコンシューマコンポーネントはコンテキストの変更を購読できます。ここでは、コンテキストオブジェクトは initialState と dispatch の props で初期化されます。これらの props は、useReducer フックを使用して状態を reducer と接続する際に入手できます。Context API でのフックの使用方法などの React フックの詳細については、公式のReact フックリファレンスのドキュメントを参照してください。

以下に、ストアフロントアプリにグローバル状態を保存するために Context API を使用するコンポーネントを定義および初期化する方法を示します:

app/components/_app-config/index.jsx にある AppConfig 特殊コンポーネントで、状態管理システムを初期化できます。ここでは、props.children にアプリのすべてのコンポーネントが含まれているので、ここに GlobalState コンポーネントを追加します。

まず、初期化に必要な props オブジェクトを取得します。React フック useReducer を使用して、reducer に接続された状態を作成します。useReducer 関数は GlobalState コンポーネントからインポートされた initialState オブジェクトと reducer を受け入れます。次に、接続された状態と、その状態を編集する dispatch 関数を渡します。

以下に例を示します。

これで、更新する機能も含め、任意のコンポーネントにグローバルコンテキストデータへのアクセスを付与できます。GlobalState コンポーネントから GlobalStateContext と GlobalDispatchContext をインポートし、これらのコンテキストオブジェクトを useContext() メソッドに提供します。

以下に例を示します。

app/components/_app-config/index.jsx にあるデフォルトの AppConfig 特殊コンポーネントを上書きして、アプリケーションで状態管理ライブラリを使用するようにカスタマイズできます。

以下に、AppConfig の内部で PWA のために Redux を設定する方法を示します。コンポーネントには、使用する必要のあるメソッドが 4 つあります:

  1. restore メソッドでは、reducer、初期状態、および任意のミドルウェアを使用して Redux ストアを作成します。
  2. freeze メソッドでは、ページの HTML に埋め込むために状態管理バックエンドを凍結できます。
  3. extraGetPropsArgs メソッドでは、アプリ全体で getProps メソッドに挿入したい追加の引数を返すことができます。この場合、Redux ストアを追加の引数として返すことができます。
  4. render メソッドでは、状態管理ライブラリのコンテキストプロバイダーを設定できます。たとえば、Redux プロバイダーでアプリをラップするのに使用できます。

ここでは、AppConfig のメソッドを使用して、ストアフロントアプリ用の Redux を設定する方法を簡単に示します。完全なソリューションでは、ここで示すステップに加え、reducer、初期状態、および必要なミドルウェアを使用してストアを作成する必要があります。