問題タブ [refluxjs]

最近、かなり複雑なビジネス アプリケーションを構築するために、Angular から React + Flux に切り替えました。

すべての状態をコンポーネント ツリーのプロパティとして渡す 1 つのコンテナー コンポーネントを持つというアプローチは、アプリが大きなページのようなモーダルを利用するため、アプリを開発するための実用的な方法ではありません。データをストアにロードするのに十分な状態がモーダルに渡されます。

私が抱えている問題は、いくつかの初期状態 (小道具として渡される) をモーダル コンポーネントのストアに取得する必要があることです。この投稿で、Facebook の善良な人々は、同期が目的ではない場合、初期状態に props を使用しても問題ないと述べています。

これは、現在、ストアに初期状態を取得する方法です。

これを行うためのベストプラクティスが何であるか、またはこれが Flux アンチパターンであるかどうかはわかりませんか?

私はフラックスアーキテクチャと反応して使用していますが、直面している問題があります。
ユーザー ID を取得してユーザーをフェッチするアクションを作成する必要があります。コードは次のとおりです。

すべてのユーザーをキャッシュするストアを使用したいので、ユーザーが以前にフェッチした場合、アクションはバックエンド呼び出しを実行しません。新しいアクションは次のようになります。

問題は、アクションでユーザー データを管理したくないということです。そのため、getFetchedUser() を実装する唯一の方法は、Users ストアをチェックインすることです。
これは良いアプローチですか？
アクションはストアにアクセスできますか?

コンポーネントのレンダリングされたマークアップをキャッシュしようとしていAppます。これがどういうわけか「ルールに反する」ことは知っていますが、私はサーバーレス環境（chrome-extension）にいます。ページの読み込み時に、キャッシュされAppたマークアップを DOM に挿入したいと考えています。期待される結果は、サーバーで react-component rendererd を使用した場合と似ています。ここで説明されているとおりです: http://www.tabforacause.org/blog/2015/01/29/using-reactjs-and-application-cache-fast-synced-app/。

私のユースケースを説明するために、反応例での思考を更新しました。

• アプリ
  • FilterableProductTable
    • 検索バー
    • ProductTable (refluxストアの状態を含む)
      • 製品カテゴリ行
      • 製品行

予想どおり、 ではどちらcomponentDidUpdateもcomponentWillUpdate呼び出されませんApp。

コンポーネント内の更新された子コンポーネントをApp適切な方法で検出することは可能ですか? できれば、子コンポーネント クラスを変更しないでください。

props/state を に移動することは避けたいと思いAppます。

私は Flux 全体に慣れていませんが、Reflux から始めて理解を深めようとしています。

私が理解しているように、Refluxストアにtriggerは、ストアのデータが変更されたことを示すメソッドがあり、更新されたデータをそこに渡します。このデータは、 Reflux.connect mixin または同様のメソッドを使用して、React コンポーネントの状態として (または状態のプロパティの 1 つとして) 設定できます。

しかし、ストアに個別にリッスンする必要がある複数のデータ セットがある場合はどうなるでしょうか。TodoMVC RefluxJS exampletitleを変更していて、TodoStore にtodo リスト (listおよび TODO アイテムのリスト)の名前を示すプロパティも含めたいとします。プロパティ<Title>への変更をリッスンし、変更時に をその状態として設定するコンポーネントもあるとします。titletitle

を呼び出すとthis.trigger(title)、タイトル コンポーネントが更新されますが、todo コンポーネントはタイトル文字列を状態として使用しようとするため、どのデータが変更されたかを示す方法が必要です。これら 2 つのプロパティ (titleとlist) を別のストアに分ける必要がありますか? または、すべての呼び出しにtrigger、プロパティを示す文字列を含める必要があります:this.trigger("title", this.title)またはthis.trigger("todos", this.list). それとも、すべてのデータを 1 つのオブジェクトに結合して、リスナーが (たとえば を使用してReflux.connectFilter) 選択する必要がありますか?

これらの最後の 2 つの例では、ストアから返されたデータを取得し、コンポーネントの状態をそれに直接設定するため、this.trigger()呼び出しに新しいデータが導入されます。これはReflux.connect、これ以上使用できないことを意味します。connectこれは、 を使用Reflux.listenTo(TodoStore,"onTodoChange")して、triggerこのコンポーネントに関係のない呼び出しを除外する必要があるということですか?

ユーザー入力に反応する AJAX ベースの検索フィールドがある場合、AJAX を介してバックエンドから検索結果を要求し、検索フィールドの下のドロップダウンに結果を表示し、カーソル キーを介して検索結果をナビゲートし、escキーの押下に反応します。インテリジェントな方法。

現在のバックボーン ベースのコンポーネントは多くの点で壊れているため、アーキテクチャを使用Reactしてその検索コンポーネントを再実装したいと考えています。Flux

計画中に、私のコンポーネントには少なくとも 10 の異なる状態 (おそらくそれ以上) がありactions、ユーザー入力によってactionsトリガーされ、非同期サーバー応答によってトリガーされるように反応する必要があることが判明しました。

質問store1 :親コンポーネントではなく、すべての状態をモデル化する必要がありますか? つまり、すべてのユーザー入力がストアの状態 (たとえば ) を変更し:searchQuery、:searchResults親ビュー コンポーネントがその状態の変化に反応することを意味します。

質問2 : または、親コンポーネント自体ですべての状態をモデル化し、 a を省略しstore、完全に削除する必要がdispatcherありますか?actions

質問3 :storeまたは親コンポーネント自体の状態の処理とは別に、コンポーネント自体は少なくとも 10 の異なる状態を持つことができ、特定の数の遷移のみが許可される必要があることが判明しました。通常、ここでステートマシンの実装をプルし、すべて:statesをモデル化し、許可され:transitionsた遷移を実行storeして、親コンポーネントでアクションが受信されるか、コールバック メソッドが呼び出されるたびに実行します。コンポーネント内でこれらの間でReact way処理するのが正しいのは何ですか?statestransitionsstates

質問Flux4 : Javascriptの最先端の実装はどれですか? これまで逆流を見てきましたが、よくわかりません。それが私の毒です。

私はここであらゆる種類の提案を受け入れます。

私が持っている単純なナビゲーションバーのユースケースがあります

コンポーネント

• NavBar.jsx
• NavBarItem.jsx

店舗

• NavStore.js

依存関係の使用

• 反応する
• 還流

ナビゲーションバーを次のようにレンダリングします

問題は、私の初期状態が {} であり、NavStore も同様です。関連する外部データがないため、NavStore.js を itemList 情報でどのように初期化すればよいですか?

Store に initializeData(data) のようなヘルパー メソッドを追加して、NavBar コンポーネントの render または getInitialState() で呼び出しようとしましたが、コンポーネントの this.setState() の後に常に呼び出され、ストアが初期値で再初期化されます。getInitialState() が常に this.setState() で呼び出される理由がわかりません。

アクション ディスパッチャーとして Reflux も使用していますが、すべてのアクションで getInitialState() が呼び出されています。少し奇妙に思えます。Reflux はデフォルトでコンポーネントの再作成をトリガーしますか?