問題タブ [flux]

次のビデオの「コンテナとコンポーネント」アプローチに従って、Flux アーキテクチャで再利用可能なコンポーネントを構築しています。

React.js Conf 2015 (22分50秒): https://youtu.be/KYzlpRvWZ6c?t=22m50s

たとえば、「次へ」ボタンのある画像スライダーを作成しています。

ImageSliderContainer

• ImageSliderStoreをリッスンし、状態を維持します (例: currentIndex)
• 小道具を使用してImageSliderをレンダリングします

画像スライダー

• props に基づいてレンダリングするだけのステートレス コンポーネント
• 子コンポーネントNextButtonがあります

次へボタン

• props に基づいてレンダリングするだけのステートレス コンポーネント
• onClick イベントあり

Flux アーキテクチャでは、NextButtonをクリックするとアクションがストアに送信されます。次に、ストアは「currentIndex」を更新し、change イベントを発行します。ImageSliderは、単一のコンテナーが通知される単一のストアと密接に結合されているため、再利用できなくなったようです。

別のオプションは、状態「currentIndex」をImageSliderコンポーネントに追加することです。NextButtonをクリックすると、 ImageSliderにその状態を更新するよう通知します。しかし、これはNextButtonからImageSliderへの逆のデータ フローを導入します(Flux アーキテクチャに違反しますか?)。また、コンポーネントが props を使用して UI をレンダリングするだけの「コンテナとコンポーネント」のアプローチにも反しています。

Flux アーキテクチャで再利用可能なコンポーネントを作成する最良の方法は何ですか? より具体的には、 NextButtonコンポーネント内で発生する onClick イベントを処理する必要がある要素 (ストア、コンテナー、コンポーネントなど) はどれですか?

編集済み

回答に基づいて、Flux アーキテクチャと「コンテナーとコンポーネント」パターンの両方を満たす 1 つのソリューションを次に示します。

• コンテナは状態「currentIndex」を所有しています。アプリには、 ScreenshotSliderContainerやDebugSliderContainerなどの複数のコンテナーが含まれる場合があり、それぞれが独自の "currentIndex" を保持します。
• コンテナーは onClick ハンドラーをプロパティとしてコンポーネントImageSliderに渡します。onClick ハンドラーはアクションをストアに送信します。
• ImageSliderコンポーネントはステートレスであり、 onClick ハンドラーを子コンポーネントNextButtonに転送します。
• したがって、 NextButtonの onClick イベントは最上位コンポーネントのImageSliderには影響しません。コンテナーのみが新しい props を使用してImageSliderをレンダリングします。

エラーデータをストアに追加したくなります。例えば、

アプリでエラーが発生すると、アクションによってディスパッチャを介してエラーが更新され、エラー パネルがユーザーに表示されます。エラー パネルのレンダリングは、エラー メッセージの状態をテストすることにより、条件付きで div を表示します。

次のユーザー入力、アクション、つまり userAction で、モデルの状態がディスパッチャーによって更新されます。問題: エラー メッセージの状態が「リセット」されていないため、エラー パネルが引き続き表示されます。

userAction は、他の非エラー状態を設定します。Flux は、この変更に対して変更を発行します。それでも、Flux モデルに従う場合、このアクションでエラーのリセットも実行する必要がありますが、それによってエミットが発生し、UI に更新するように指示されます。間違っているようです。

私の考えは次のとおりです。 1. この種のものを店に置かないでください。または、 2. ストアは、状態のエラー以外の更新ごとにエラー状態をリセットします。または、 3. 各アクションには、状態更新のエラー状態オブジェクトも含まれます。

現在、私の解決策は、ストア関数内のエラーデータをクリアすることです:

これを行う非慣用的な方法は何ですか？私は React と Flux を初めて使用するので、これは初心者の質問だと確信しています。Flux の実装としてMcFlyを使用しています。

データの複数のタブページを使用する React + Flux アプリケーションがあります。各タブページには同じ種類のデータ (請求書など) が表示されますが、別のオブジェクトからのものです。この件に関して私が読んだ他の投稿に基づいて、請求書を表示するすべてのタブページの「請求書」オブジェクトを含む「InvoiceStore」にコレクションを作成することにしました。

すべてのタブ (請求書の詳細内) には、複数のウィジェットのようなコンポーネントがあります。これらのコンポーネントは、複数のレイヤーにネストされています。

課題は、データを表示する必要がある請求書オブジェクトをすべてのコンポーネントが認識している必要があることです。請求書 (タブ) の最上位コンポーネントからその子孫のそれぞれにデータ (実際のデータまたは請求書コレクション内のアイテムの「キー」) を渡すことで、それを調整できることはわかっていますが、それは、中間は、受け取ったプロパティをその子に渡す必要があります。これは私にはやり過ぎのように思えます。

1 つのコンポーネントとその子孫のスコープを持つある種の変数を持つことは可能ですか? それとも、この課題に対する別の種類の「標準化された」ソリューションはありますか?

提案は本当に感謝しています!

新しいアイテムが追加されたときに、保存された配列を更新する最良の方法を見つけようとしています。

現在、以下のコードでソートしています (sortMissions() は AppDispatcher.register コードで呼び出されます)。 _missions 配列 (たとえば、_incomplete_missions が変更された場合でも、_missions を並べ替えます)。

MissionStore.getMissions() で _missions をソートするだけで、他の場所ではソートしないことを考えましたが、何かが変更されたかどうかにかかわらず、getMissions() が呼び出されるたびにソートされることになります。

また、_missions が変更されるすべてのディスパッチャ ケースに sortMissions() を挿入することも考えましたが、それは自分自身を複製しているようです。

理想的には、(同じストア内から) _missions 配列の変更をサブスクライブし、_missions が変更された場合にのみ _missions を並べ替えたいのですが、どうすればよいかわかりません。

ありがとう！

私はRefluxを使用していますが、通常はajax呼び出しを行った後にトリガーしていますが、うまく機能しています。テスト目的で ajax 呼び出しは必要ありませんでしたが、最小 5 ミリ秒のタイムアウトを指定しない限り、トリガーが機能しないことに気付きました。ここに動作する例と動作しない例があります。

動作しない例:

これはうまくいきます：

遅滞なく機能しない理由を説明できますか? それはバグか、私が理解できないものですか。

Flux パターンを理解しようとしています。

優れた設計では、アプリは、特定のアプリケーション ロジックによって結合された、比較的独立した普遍的な (したがって再利用可能な) コンポーネントで構成されるべきだと私は信じています。

Flux には、データとドメイン ロジックをカプセル化するドメイン固有のストアがあります。これらは、同じドメインの別のアプリケーションで再利用される可能性があります。

アプリの状態とロジックを保持するアプリケーション固有のストアもあるはずだと思います。これが接着剤です。

これを架空の「GPS Tracker」アプリに適用してみます。

...

ユーザーが [Stop Tracking] ボタンをクリックすると、対応する ViewController が を発生させSTOP_CLICKます。

• AppState.on(STOP_CLICK):

  • dispatch(STOP_GEOLOCATION)
  • dispatch(STOP_TRACKING)

• GeolocationService.on(STOP_GEOLOCATION):

  • stopGPS(); this.on = false; emit('change')

• TrackStore.on(STOP_TRACKING):

  • saveTrack(); calcStatistics(); this.tracking = false; emit('change')
  • dispatch(START_UPLOAD)

だから、私はイベントスノーボールを持っています。

Flux では、あるアクションが別のアクションを発生させてはならないと言われています。しかし、これがどのように行われるのかわかりません。

これらはUIに依存しない必要があるため、ユーザーアクションはドメインストアに直接行くことはできないと思います。むしろ、AppState (またはアプリ ロジックが存在する場所) は、ユーザー アクションをドメイン アクションに変換する必要があります。

1. これをFluxの方法で再設計するにはどうすればよいですか?
2. アプリケーションロジックはどこに行くべきですか?
3. ドメイン ストアをアプリ ロジックから独立させようとするのは正しいですか?
4. 「サービス」の場所はどこですか？

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

私たちのコードベースでは、最近、多くの React コンポーネントを純粋なフラックス アーキテクチャに移行しました。したがって、データ フローは、Facebook チームから提供された次の画像とほとんど同じです: _{(ソース: github.io )}

私たちが直面している問題の 1 つは、サーバーを呼び出して結果を取得するために必要なボイラープレート コードが大量にあることです。プロセスは次のとおりです。

1. GET_DATA_FROM_SERVERView は、何かと呼ばれるアクションをアクション作成者 ( としましょう) に伝達しViewActionCreatorます。
2. ViewActionCreatorほとんどの場合、ペイロードを持たないこのアクションをディスパッチしてから、api.retrieveData
3. サーバーからデータを受信するとapi.retrieveData、アクションをディスパッチします。この場合SERVER_DATA_RECEIVED、取得したデータをペイロードとして呼び出します。
4. ストアは、ディスパッチされた 2 つのアクションに応答します。ただし、ほとんどの場合、ストアは 2 番目のアクション ( ) に対してのみ何かをSERVER_DATA_RECEIVED行います。これは、楽観的なビューの更新は、ログインなどのいくつかの例外を除いて、通常は必要ないか、あまり役に立たないことがわかっているためです。

apiしたがって、私の質問は、ビューがのメソッドを直接呼び出すべきではなく、それらの api メソッドがデータ受信時にのみアクションをディスパッチするべきではない理由はありますか?

私たちが直面している別の関連する問題は、https://github.com/STRML/keyMirror を使用して生成された定数の使用に起因します。アクション クリエーターとストアで使用される定数を定数ファイルに追加するのを忘れるというエラーに繰り返し遭遇しますが、これは実行時まで現れません。ディスパッチャーであり、未定義の定数を使用すると、これは単純に switch ステートメントの最後まで浸透します。

Websocket を使用して、Firebase DB から受信したアイテムのリストを表示する単純なアプリケーションを作成しようとしています。データを受信するには、次のような firebase イベントをリッスンする必要があります。

私の質問は、このイベントを登録する正しい場所はどこですか?

Flux に関するこの素晴らしい記事を読みました。コメント セクションに、データの受信はストアの getData メソッドを介して行われるという Facebook エンジニアからの回答があります。一方、Facebook の Todolistチュートリアルには、サーバー アクションを処理する「handleServerAction」のオプションがあります。ビューとサーバーから (ビュー アクションとサーバー アクションとして) アクションをディスパッチする必要があるという概念を理解しています。

ビュー アクションは、ビュー ファイルに対するユーザー インタラクションからディスパッチされます。サーバー アクションをディスパッチする場所がどこにあるのかわかりません (「handleServerAction」メソッドを使用したい場合)