問題タブ [flux]

私は、ajax呼び出しをフラックス/リフラックスのやり方に合わせる方法を見つけようとしています。私がオンラインで見つけた情報のスクラップから、API ロジックをストアから分離することは正しいようです。

そこから始めて、サーバーに要求を行うクライアント API を作成しました。ここで、これらの関数が私のアクションをリッスンし、リクエストを作成し、成功すると他のアクションをトリガーして、サーバーからの新しいデータでストアを更新するようにします。

API の逆流 createStore メソッドに似たものを作成するにはどうすればよいですか? または、サーバー呼び出しがアクションをリッスンするための他のクリーンな方法はありますか?

私はnodejsを使用しており、通常は次のようなcsrfトークンを渡します:

ユーティリティ.js

app.js

そして、ejsページで私がすること

ただし、現在、フロントエンドにflux/reactを使用しており、フォーム送信のためにcsrfトークンを渡す必要があり、これを行う方法がわかりません。翡翠を使用して同様の答えがここにありました：

express.js を使用して Ajax 呼び出しで CSRF 保護を実装する方法 (完全な例を探しています)?

ただし、私は ejs (jsx を使用) (または単に html) を使用しており、jade を使用したくありません。

イベントを発生させたハンドラーを見つける方法はありますか?

たとえば、私の店:

最後の関数が起動すると、リスナーは次のようになります。

イベントを発生させた関数を知りたい

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

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

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

Flux アクションはストアにアクセスできますか? 最近、コード レビューのコメントから、特定の値をストアからアクションで直接取得するのではなく、React コンポーネントから渡すように求められました。これにより、Flux のデータ フローが次のように変更されます。

これに

すべてのデータ変更は依然としてディスパッチャを経由しているため、データ フローは依然として意図した方向に進んでおり、更新は依然としてアトミックであり、フローは依然として簡単に推論できるように思えます。何か欠点はありますか？

私は 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の最先端の実装はどれですか? これまで逆流を見てきましたが、よくわかりません。それが私の毒です。

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