問題タブ [reactjs-flux]

私が開発するアプリケーションは、最初は Flux で構築されました。

しかし、時間が経つにつれて、アプリケーションの保守が難しくなりました。非常に多くのアクションがありました。そして通常、 1 つのアクションは 1 つの場所(ストア)でのみ聴取されます。

アクションを使用すると、すべてのイベント ハンドラー コードを 1 か所に記述しなくても済みます。したがって、これの代わりに：

私は書くことができます：

しかし、私はそのようにアクションを使用することはありません。これは私のアプリケーションの問題ではないことはほぼ確実です。

アクションを呼び出すたびに、store.onSmthHappenの代わりに呼び出すことができaction.smthHappenました。

もちろん、1 つのアクションが複数の場所で処理される場合は例外があります。しかし、それが起こると、何かがうまくいかなかったように感じます。

アクションを呼び出す代わりにストアからメソッドを直接呼び出すとどうなるでしょうか? 私のアプリケーションはそれほど柔軟ではありませんか? いいえ！名前を変更するだけで発生します(まれな例外を除きます)。しかし、なんと費用がかかります！これらすべてのアクションにより、アプリケーションで何が起こっているのかを理解することは非常に難しくなります。複雑なアクションの処理を追跡するたびに、それらが処理されているストアを見つける必要があります。次に、これらのストアで、別のアクションを呼び出すロジックを見つける必要があります。など。

今、私は私の解決策に来ます：

ストアから直接メソッドを呼び出すコントローラーがあります。アクションの処理方法に関するすべてのロジックがストアにあります。WebAPI への呼び出しも格納します (通常、1 つの WebAPI に関連する 1 つのストアとして)。イベントを複数の Store で (通常は順番に) 処理する必要がある場合、コントローラーはストアから返された promise を調整することでこれを処理します。それ自体のプライベート メソッドでのシーケンシャル (一般的に使用される) の一部。また、コントローラーのメソッドは、それらを処理の単純な部分として使用できます。したがって、コードを複製することは決してありません。

コントローラ メソッドは何も返しません (一方向フロー)。

実際、コントローラーには、データを処理する方法のロジックが含まれていません。それは、どこで、どの順序でポイントだけです。

ストアでのデータ処理のほぼ全体像を見ることができます。ストアには、別のストアと対話する方法に関するロジックはありません(flux を使用すると、多対多の関係に似ていますが、アクションのみを介して行われます)。これでストアは、ドメイン モデル (コレクション) のロジックのみを担当する、非常にまとまりのあるモジュールになりました。

フラックスの主な (私の意見では) 利点はまだここにあります。

その結果、データの唯一の真のソースである店舗があります。コンポーネントはストアにサブスクライブできます。また、コンポーネントは以前と同じメソッドを呼び出しますが、代わりに をactions使用しcontrollerます。Reactとのやり取りは全く変わりませんでした。

また、イベント処理も明らかになります。これで、コントローラーのハンドラーを見るだけですべてが明確になり、デバッグがはるかに簡単になります。

質問は：

アクションが流動的に作成されたのはなぜですか? そして、私が見逃したそれらの利点は何ですか?

ReactJS + CoffeeScript アプリケーションをローカルで実行しようとしていますが、ページが JS に読み込まれているように見えますが、コンソールにエラーが表示されて何も表示されません (空白の画面)。

Uncaught ReferenceError: Flux が定義されていません

これは、エラーが発生していると思われるコードのスニペットです。アプリケーションのノード モジュールの一部として Flux があります。ここで何をすることが期待されているのかわかりません。

ガイドしてください。

わかりました...見てみましょう。複数の項目を含む List コンポーネントがあります。

そのリスト コンポーネントには、Flux ストアに保存された状態 (チェックされたアイテム) が含まれており、アイテムに props として渡されます。リストに表示されているときにブラウザを更新すると、ストア データ (選択された状態) が消えます (それで問題ありません)。

アイテムをクリックしてから戻ると、リストの状態 (ストアからのもの) が保持されます (良好)。

問題は、アイテムをクリックしてブラウザを更新し、リストに戻ると、リストストアと状態がなくなっていることです (私が望む動作ではありません)。

私が間違っていることはありますか？私が見ていないこれに対する簡単な解決策はありますか？SessionStorage を使用したかったのですが、リストを更新しても状態が保持されます。

FacebookのFluxについて頭を悩ませようとしています...

ヘッダーのボタンを使用して非表示および表示できるサイド メニューを備えたアプリがあるとします。

ヘッダーは 1 つのコンポーネントで、サイド メニューは別のコンポーネントです。

現在、ヘッダー コンポーネントは、HTML div サイド メニュー要素にクラスを設定するだけで、CSS によってアニメーション化されて非表示になります。

ここでの一般的な考え方は何ですか？

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

私は Flux+React とAngularの答えを探しているわけではありません (すでにオンラインでたくさんあります) が、2 つの「考え方」の最大の違いは何かを知りたいです。相対的に、The React Wayとは何ですか?

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

最初に相違点、次に類似点: AngularJS は非常に独断的であり、いくつかの非常に大きな禁止事項がありました。たとえば、UI/DOM コードをコントローラーに配置しないでください。Reactの大きな禁止事項と意見は何ですか?

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

私はフラックスアプリケーションに取り組んでおり、状態を維持するためにimmutable.jsを採用することを検討しています。不変オブジェクトを更新するための独自のヘルパー ( http://facebook.github.io/react/docs/update.html ) を反応が提供していることがわかりましたが、それが不変の独自の setIn および updateIn メソッド (つまり、オブジェクトが setIn で変更された場合、オブジェクトを === と比較して既に比較できます)。immutable.js で反応ヘルパーを使用する理由はありますか? それは単なる構文糖ですか？

TL;DR は:

と違う

私は現在、ReactJS に一般的に関連付けられているフラックス パターンを使用して、プロトタイプ アプリケーションに取り組んでいます。

Facebookフラックス/チャットの例では、 ThreadStoreとUnreadThreadStoreの 2 つのストアがあります。後者は、前者のコンテンツを同期的に読み取るgetAllメソッドを提供します。

派生ストアでの操作はコストがかかりすぎて同期的に実行できず、理想的には非同期プロセス (Web ワーカー、サーバー トリップ) に委任されるという問題が発生しました。これを解決するにはどうすればよいか考えています。

私の同僚は、ゲッターからプロミスを返すことを提案しています。

私はこれに完全に満足していません。ビューはストアではなく変更の主な受信者であるため、パターンとの決別のように感じます。これは、私たちが検討してきた別の手段です。この方法では、ビューのマウント イベントが、派生データを更新する要求をディスパッチします (必要な場合)。

このアプローチで私が気に入っているのは、ビューが DerivedStore をビュー モデルとして扱い、この類のビューが主にビュー モデルの鮮度に関心があることです。しかし、私が懸念しているのは、ストアが同期しなくなる可能性です。

私の質問は次のとおりです。

• 約束のアプローチは受け入れられますか？
• 2番目のアプローチはより良い/より悪いですか？もしそうなら、なぜですか？
• この問題に対する既存の「標準的な」アプローチはありますか?

PS: このコードに基本的なリンティング エラーがある場合は申し訳ありません。私は過去 3 か月間 Coffeescript で作業しており、リンティング機能が破壊されました...

storeと通信するReact ビューがあります。ビューとストアを別々にテストしましたが、組み合わせてテストすることはできませんでした。

ここに記載されている構造に従いましたが、 TypeErrorを受け取りました。を使ってもJestがストアをコンポーネントとして登録しようとしているようdontMockです。

関連するコードと思われるものを以下に含めましたが、必要に応じて全体を提供できます。

Jestテストを見る

ありがとうございました！