ReactJSアプリケーションのMVVMアーキテクチャパターン
私は半年長のreactおよびJavaScript開発者です。いくつかのユニバーサルreactアプリケーションを作成しました。
今日、CTOから次のように言われました：アプリケーションにソフトウェアアーキテクチャパターンを使用していますか？
答えはありません。彼は、アプリケーションにAndroidを使用するMVVMチームを指しています。
私は貪欲に検索していますが、この状況の傾向の方法論や例は見つかりませんでした。 Redux、Redux-Saga、React-Contextなどを使用しました。
CTOに説明する方法がわからない、または彼の答えは何ですか？
したがって：reactアプリには本当にソフトウェアアーキテクチャパターンが必要ですか？
React自体は、ソフトウェアアーキテクチャについて特に意見を述べるものではありません。これは、状態やデータ共有（小道具）などを管理するためのガイドラインとともに、再利用可能なコンポーネントパラダイムを促進するライブラリです。ある時点で、Facebookはこれをthe V in MVCが、その後、そのマーケティングから離れてより抽象的に呼ぶようになったA JavaScript library for building user interfaces。
もちろん、Reactアプリに関連付けられた典型的なツールは、一緒に使用すると、アーキテクチャの何かに役立ちます。
考えられるいくつかの方法：
シンプルReactアプリは単に「VVM」または「VC」
MVCはおそらく、開発の世界で2つのうちのよく知られているものです。コントローラー（C）とビューモデル（VM）の重要な概念上の違いは、次のように要約できます。controllerは、イベントをリッスンし、正しい方向にルーティングします。アプリケーション全体の機能を促進するのは接着剤です。一方、view-modelは、データの現在の状態をモデルに接着するだけです。
したがって、Facebookの「VのMVC」の元々の使用は、おそらく「MVVMのV」と同じくらい簡単だったかもしれません-コントローラという用語は、バックエンド開発の世界でより理にかなっています。
ReduxなしのベアボーンReactアプリは、データをコンポーネントに直接プルします（たとえば、fetchのcomponentDidMount 'sまたはGraphQLの活用）、あらゆる種類のデータラングリング単純な「VVM」モデルと呼ばれます。
View-Model（VM）：単純な状態を管理し、データをViewに直接渡し、潜在的にデータをViewから直接戻すコンポーネント関連のコード
ビュー（V）：ビジュアルの外観（JSX、CSS）
複雑さを追加すると、「MVVM」/「MVC」と呼ぶことができます
Reduxでトスした場合、redux-saga、または単純なReactコンポーネント状態、モデル操作を導入しています。これで少なくとも2つのことがあります。モデルModel（ M）は以下を表すことができます：
- アプリケーションの実際のビジネスロジック
- クライアントでの複雑な動作の保存と管理
ビジネスロジックは実際には望ましくない場合があります。たとえば、サーバーを制御している場合、すべてのビジネスロジックを1か所（サーバー上）に保持し、ユーザーと対話するために必要なUIを提供するだけの価値があるかもしれません。ただし、RESTエンドポイントを制限しており、いくつかの論争を行う必要がある場合（たとえば、サガやコンポーネント内で）、それはビジネスロジックになります。
クライアントの行動管理は、特に、セッションに基づいてユーザーにさまざまなものを表示するようなことをしているような複雑なアプリケーション（たとえば、未登録ユーザー対ユーザー対管理者）で行われます。これはおそらく、クライアントのみが使用するために含まれているすべてのreduxストアインタラクションでこれを実行しているでしょう。
免責事項：MVC、MVVMなどについて議論することは、正確に何の多くの異なる意見につながる可能性がありますそれらは[1]を意味します。上記では、私が見た一般的なパターンとそれらがMVC/MVVMにどのように適合するかの類似点を描画しようとしましたが、それにアプローチするための非常に多くの異なる方法またはそれについて考えるより細かい方法があります。システムが理解しやすい限り、ラベルを貼ることにこだわるつもりはありません：ユースケースと開発の規模に合ったレベルのモジュラー、DRY、抽象化など。
[1] この質問に対する回答とコメント でもう少し詳しく説明します