サーチ…


前書き

限られた構造と、実行時の状態変更をより容易にするための新しいコードのために、フロントエンド上のReactJSを使用するアプリケーションの成長が計画されているとき、Fluxアプローチを使用することは非常に便利です。

備考

Fluxは、FacebookがクライアントサイドWebアプリケーションを構築するために使用するアプリケーションアーキテクチャです。これは、単方向データフローを利用してReactの構成可能なビューコンポーネントを補完します。これは正式なフレームワークではなく、パターンであり、新しいコードを多く使わずにFluxをすぐに使用することができます。

Fluxアプリケーションには、ディスパッチャストア 、およびビュー (リアクションコンポーネント)の3つの主要部分があります 。これらをModel-View-Controllerと混同してはいけません。コントローラはFluxアプリケーションに存在しますが、コントローラのビューです。階層の最上部にあるビューは、ストアからデータを取得し、そのデータを子に渡すことがよくあります。さらに、アクション作成者 - ディスパッチャーヘルパーメソッド - は、アプリケーションで可能なすべての変更を記述するセマンティックAPIをサポートするために使用されます。 Fluxの更新サイクルの4番目の部分と考えることは有益です。

Fluxは、単方向データフローを優先してMVCを回避します。ユーザーがReactビューと対話すると、ビューは中央ディスパッチャを介してアクションを、アプリケーションのデータとビジネスロジックを保持するさまざまなストアに伝播し、影響を受けるすべてのビューを更新します。これは、Reactの宣言型プログラミングスタイルで特に効果的です。これは、ストアが状態間でビューを遷移させる方法を指定せずに更新を送信できるようにします。

データフロー

これは包括的な概要の概要です。

フラックスパターンは、単方向データフローの使用を前提としています。

  1. アクション - アクションtypeとその他の入力データを記述する単純なオブジェクト。

  2. ディスパッチャー - シングルアクションレシーバーとコールバックコントローラー。それがアプリケーションの中心的なハブであるとします。

  3. Store - アプリケーションの状態とロジックが含まれます。ディスパッチャにコールバックを登録し、データレイヤへの変更が発生したときに表示するイベントを発行します。

  4. ビュー - ストアからの変更イベントとデータを受け取るコンポーネントを反応させます。何かが変更されたときに再レンダリングが発生します。

    Fluxデータフローの時点で、ビューはアクション作成し、ディスパッチャーに渡してユーザーの操作を行うこともできます

元に戻す

それをより明確にするために、私たちは最後から始めることができます。

  • 異なるReactコンポーネント( ビュー )は、異なるストアから変更を加えたデータを取得します。

    コントローラービューと呼ばれるコンポーネントはほとんどありません。ストアからデータを取得し、データを子孫のチェーンに渡すためのグルーコードを提供するためです。コントローラビューは、ページの重要な部分を表します。

  • ストアは、アプリケーションのビジネスロジックのアクションタイプと他の入力データを比較するコールバックとして認識されます。

  • ディスパッチャーは、共通アクション・レシーバーとコールバック・コンテナーです。

  • アクションは、必須のtypeプロパティを持つ単純なオブジェクトだけです。

    以前は、アクションタイプとヘルパーメソッド( アクションクリエイターと呼ばれる)に定数を使用したいと思うでしょう。



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow