問題タブ [reactjs-flux]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
3098 参照

javascript - React Flux: 依存関係を保存する

私は最近、React と Flux アーキテクチャで遊んでいます。

2 つのストア A と B があるとします。A は B からの値を必要とするため、B に依存しています。したがって、ディスパッチャーがアクションをディスパッチするたびに、最初に B.MethodOfB が実行され、次に A.MethodOfA が実行されます。

A を B のリスナーとして登録し、B が変更イベントを発行するたびに A.MethodOfA を実行するよりも、このアーキテクチャの利点は何ですか?

ところで: Facebook のサンプル ディスパッチャの「スイッチ ケース」を使用しない Flux 実装について考えてみてください。

0 投票する
1 に答える
1173 参照

reactjs-flux - Flux Dispatcher - ビュー アクションとサーバー アクション

セマンティクス以外に、ビュー アクションとサーバー アクションに対して異なるディスパッチ メソッドを作成する理由はありますか? 私が見たすべてのチュートリアルと例 (特にこれ) は、ペイロードのアクション タイプをオンにするために、ディスパッチされたペイロードをリッスンするときにソース定数を完全に無視します。

このパターンがフラックスの例で広く使用されているのには理由があると思いますが、これが役立つ理由についての具体的な例はまだ見ていません。おそらく、ストアで動作するかどうかを判断するために、追加の if またはスイッチをペイロード ソースに追加することができますが、私が見た例では、この定数をまったく考慮していません。これについての考えは大歓迎です。

0 投票する
1 に答える
2283 参照

javascript - サンプル チャット アプリでの Flux アーキテクチャの誤解

Flux example chat appを理解しようとしています。著者は、この単方向データ フローについて言及しています。ここに画像の説明を入力

ただし、サンプル アプリでは、Action Creators( ChatMesssageActionCreator ) とStores( MessageStore ) の間、およびStores( MessageStoreThreadStore ) とWeb API Utils( ChatMessageUtils ) の間に依存関係があり、一方向のデータ フロー ルールに反しているようです。ここに画像の説明を入力

与えられた例に従うことをお勧めしますか、それともより良いパターンを設計する必要がありますか?

アップデート

ChatMessageUtils は Web API Utils に属していないことがわかったので、store からの 2 つの矢印はそこを指すべきではありません。したがって、問題ない可能性があります。ただし、ActionCreators と Store の間の接続はまだ奇妙に思えます。

0 投票する
3 に答える
5156 参照

javascript - ログインフローでパーミッションセンシティブなアクションを処理する React/Flux の方法

私は React/Flux で遊んでいますが、許可に敏感なアクションを処理するための「Flux Way」に頭を悩ませています。

包括的な質問: ログインしていない訪問者がログインを必要とするアクションを試みた場合、(a) ユーザーがログインしているかどうかを確認する、(b) ログインフローを開始する、(c) の Flux の方法は何ですか? ) 成功したらアクションを終了しますか?

ユーザーが投稿するためにログインする必要があるフォーラム アプリの例を見てみましょう。

コメント フォーム コンポーネント (ほとんどは FB の React tut から取得) があります。

コメント ストア (省略形)

そして、セッションを処理するためのストア (省略形も):

私の最初の考えは、これは Flux のwaitFor()方法のケースであるということでした。ただし、上記の実装は、設定されるとすぐに (戻るとすぐに)waitFor依存ループを閉じるため、失敗します。SessionStore.dispatchTokenensureCurrentUser

これは、ペイロードを に渡しensureCurrentUser、次に のルート ハンドラに渡す必要があるケース/loginですか? これらのタイプのフローを処理する Flux の方法は何ですか?

前もって感謝します :)

0 投票する
1 に答える
3128 参照

javascript - ReactJS ネストされたリスト (flux)

React をいじっていて、ネスト リストに問題があります。プロジェクトと todo の 2 つのリストがあり、各 todo には がありproject_idます。これらのリストに関連する 4 つのコンポーネントがあります。これは、プロジェクトの ID に設定された独自のプロパティを持つ のprojects-componentリストをレンダリングします。はtodosのリストを取得するために依存する関数を渡し、4 番目のコンポーネントのリストをレンダリングします。project-componenttodos-componentprojectIdtodos-componentTodosWatchMixingetTodoscomponent.props.projectIdtodo-component(ここには表示されていません。) 新しいプロジェクトをリストに追加するまで、すべてがうまく機能します。プロジェクトは表示されますが、todo アイテムがシフトします。新しいプロジェクトには別のプロジェクトの todo が含まれており、プロジェクトの残りの todo のほとんどもシフトしているように見えます... React Chrome Dev Tool を使用すると、新しいプロジェクトに独自の ID があることがわかりますが、アイテムのリストもあります...何が欠けていますか?

コードの一部を次に示します。

プロジェクト-component.js

project-component.js

todos-component.js

プロジェクト-store.js

ここで進行中の作業を見ることができます。またはを押してテスト データをロードしctrl+shift+Lcommand+shift+L新しいプロジェクトを追加すると、新しいプロジェクトにファーム リストの項目が表示されるはずです。