AngularJSからFluxへ-React Way

Question

AngularJSの実践的な経験を持つ開発者として、Reactを使用してFluxでWebアプリを作成する私のメンタルモデルを調整するにはどうすればよいですか？

私はFlux + Reactを探していませんAngular答え（すでにオンラインでたくさん））[would が何であるかを知りたい最大 2つの「考え方」の違い：事前に、私はThe Angular Way;に紹介されました;比較的、何であるかThe React Way？

Angular宇宙を離れてFluxに移行するとき、重要なこととは何ですか注意を開始する？

最初の違い、そして今は類似点：AngularJSは非常に独断的であり、UI/DOMコードをコントローラーに配置しないなど、非常に大きな禁止事項がいくつかありました。 Reactの大きな禁止事項と意見は何ですか？

最後に重要なことですが、FacebookはFluxをMVCの代替と呼んでいますが、私が見ているように、Reactはビューエンジンであり、ストアはモデルコンテナーに焦点を当てています単一のドメインで、ディスパッチャーとアクションがコントローラーを形成しているので、これは実際には別の名前のMVCではないですか？

fisherwebdev · Answer

他の人にAngularとの比較/対比をさせましょうが、ここにあなたの2つの質問に対するいくつかの答えがあります。

これは実際には別の名前のMVCではないですか？

Fluxにデータ/ロジックレイヤーとビューレイヤーの間の懸念の分離が存在しても、MVCにはなりません。他の多くのパターンにも同様の分割があり、特にCQRS、間違いなくFluxの最も近い従兄弟です。 MVCの意味では、Fluxにコントローラーはありません。アクションとディスパッチャーはコントローラーに相当しません。コントローラービューは近いですが、コントローラーのような面で実際にはかなり制限されています。主な違いは、MVCコントローラーにはアプリケーションロジックが含まれ、アクションponモデルがあることです。対照的に、Fluxストアにはすべてのアプリケーションロジックが含まれ、セッターはありません。

Angularユニバースを離れてFluxに移行するとき、注意を開始する必要がある重要な点は何ですか？

Fluxの主な値：

複雑さよりも単純さ。
プログラマーのメンタルモデルは、少なくともコード自体と同じくらい重要です。
アプリケーションの一部は、高度に分離され、他の部分についてはできるだけ「知る」べきではありません。
コントロールの反転：すべてのコントロールは、状態が管理されるストアに常駐する必要があります。店舗は行動を起こさず、行動によって通知されます。
アプリケーションは、成長しても弾力性と柔軟性を維持し、予期しない新機能をより迅速かつ簡単に開発できるようにする必要があります。

Fluxの主要な概念：

単方向データフロー：アクション→ディスパッチャー→ストア→ビュー
- Every状態の変化とall新しいデータは、ディスパッチされたアクションで始まります。
- この4ステップのデータフローは、Fluxプログラマーのコアメンタルモデルです。
ディスパッチにより、アプリケーション全体のアプリケーション状態が変換されます。
- これは、変化のスナップショットを作成する瞬間です。これは簡単に推論できます。
- 派遣中に派遣することはできず、このシンプルさを維持しています。したがって、すべての必然的な変更は、元のアクションによって駆動される必要があります。
Fluxストアはドメインモデルであり、ORMモデルではありません。これらはすべてのロジックを含み、アプリケーション内の特定の論理ドメインのすべての状態を管理します。コレクション、特異値、またはその両方の組み合わせを含めることができます。
Fluxは派生データ-あるストアが別のストアの変更に依存している-が、モデルまたはストアが正規化されたデータを管理する複雑なアプリケーションでの不測の事態であると想定しています。これに対処するために、Flux Dispatcherは、この依存関係を宣言的に管理するメカニズムストア内を公開する必要があります。 FacebookのDispatcherでは、これはwaitFor()メソッドで行われます。これにより、あるストアが別のストアのアクションへの応答を待ってから、独自の応答に進むことができます。

Fluxアプリケーションの主要部分：

Actions：新しいデータと特定のタイプを含むオブジェクトリテラル。ストアがドメインに関連しているかどうかをストアが識別できるようにします。
Dispatcher：コールバックを介して、ペイロード（アクション）を登録者（ストア）に配布するコールバックのレジストリ。それ自身の知性はありません。すべての知性は店にあります。
Stores：自分自身をDispatcherに登録し、状態の変化が発生するたびに 'change'イベントを発行するドメインモデル。
Controller-views：コンポーネントツリーのルート近くのコンポーネントを表示します。彼らはストア内の「変更」イベントをリッスンし、ストアの公開されたゲッターメソッドを通じて新しいデータを取得し、そのデータを子に渡すことにより、このイベントに応答します。コントローラビューとビューの唯一の違いは、このリスニング機能です。
Views：純粋な関数のように、コントローラビューコンポーネントのステートレスな子で、データの送受信を行います。ビューとコントローラービューは、ほとんどパフォーマンスの低下を伴うことなく自由に再レンダリングする機能を提供するため、Reactを使用して実装することが最も一般的です。
Utils：異なるモジュール間で簡単に共有できる純粋な関数のライブラリ。