logo

リアクトフラックスコンセプト

Flux は、React を使用してクライアント側 Web アプリケーションを構築するために Facebook が内部で使用するアプリケーション アーキテクチャです。これはライブラリでもフレームワークでもありません。これはライブラリでもフレームワークでもありません。これは、React as view を補完する一種のアーキテクチャであり、単方向データ フロー モデルの概念に従います。これは、プロジェクトに動的なデータが含まれており、効果的な方法でデータを更新し続ける必要がある場合に役立ちます。実行時エラーが減少します。

Javaのコメント

Flux アプリケーションには、データの処理において 3 つの主要な役割があります。

  1. 発車係
  2. 店舗
  3. ビュー (React コンポーネント)

ここで、Model-View-Controller (MVC) モデルと混同しないでください。コントローラーは両方に存在しますが、Flux コントローラー ビュー (ビュー) は階層の最上位にあります。ストアからデータを取得し、このデータを子に渡します。さらに、アクション クリエーター - アプリケーション内で可能なすべての変更を記述するために使用されるディスパッチャー ヘルパー メソッド。これは、Flux 更新サイクルの 4 番目の部分として役立ちます。

構造とデータフロー

リアクトフラックスコンセプト

Flux アプリケーションでは、データは単一方向 (unidirection) に流れます。このデータ フローはフラックス パターンの中心です。ディスパッチャー、ストア、およびビューは、入力と出力を持つ独立したノードです。アクションは、新しいデータと型プロパティを含む単純なオブジェクトです。ここで、フラックス アーキテクチャのさまざまなコンポーネントを 1 つずつ見てみましょう。

発車係

これは React Flux アプリケーションの中心ハブであり、Flux アプリケーションのすべてのデータ フローを管理します。これはストアへのコールバックのレジストリです。これ自体には実際のインテリジェンスはなく、アクションをストアに配布するためのメカニズムとして機能するだけです。すべてのストアは自身を登録し、コールバックを提供します。店内を改造するあらゆるイベントを扱う場所です。アクション作成者がディスパッチャーに新しいアクションを提供すると、すべてのストアはレジストリ内のコールバックを介してそのアクションを受け取ります。

ディスパッチャの API には 5 つのメソッドがあります。これらは:

Linux ファイルを編集する
SN メソッド 説明
1. 登録する() これは、ストアのアクション ハンドラー コールバックを登録するために使用されます。
2. 登録解除() ストアのコールバックの登録を解除するために使用されます。
3. を待つ() これは、指定されたコールバックが最初に実行されるのを待つために使用されます。
4. 急送() アクションをディスパッチするために使用されます。
5. isDispatching() これは、ディスパッチャが現在アクションをディスパッチしているかどうかを確認するために使用されます。

店舗

これには主にアプリケーションの状態とロジックが含まれます。これは従来の MVC のモデルに似ています。これは、アプリケーション内の特定の状態を維持し、アクションに応じて自身を更新し、変更イベントを発行してコントローラー ビューに警告するために使用されます。

ビュー

コントローラービューとも呼ばれます。これは、アクションを生成し、ストアから新しいデータを受信するためのロジックを保存するためにチェーンの最上位に配置されます。これは React コンポーネントであり、変更イベントをリッスンし、ストアからデータを受け取り、アプリケーションを再レンダリングします。

行動

ディスパッチャー メソッドを使用すると、ストアへのディスパッチをトリガーし、アクションと呼ばれるデータのペイロードを含めることができます。データをディスパッチャーに渡すのは、アクション クリエーターまたはヘルパー メソッドです。

Javaでソートされた配列

フラックスの利点

  • 理解しやすい一方向のデータ フロー モデルです。
  • これはオープンソースであり、MVC アーキテクチャのような正式なフレームワークというよりは設計パターンに近いものです。
  • フラックス塗布はメンテナンスが容易です。
  • フラックス塗布部分は分離されています。