問題タブ [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.
javascript - React Flux: 依存関係を保存する
私は最近、React と Flux アーキテクチャで遊んでいます。
2 つのストア A と B があるとします。A は B からの値を必要とするため、B に依存しています。したがって、ディスパッチャーがアクションをディスパッチするたびに、最初に B.MethodOfB が実行され、次に A.MethodOfA が実行されます。
A を B のリスナーとして登録し、B が変更イベントを発行するたびに A.MethodOfA を実行するよりも、このアーキテクチャの利点は何ですか?
ところで: Facebook のサンプル ディスパッチャの「スイッチ ケース」を使用しない Flux 実装について考えてみてください。
reactjs-flux - Flux Dispatcher - ビュー アクションとサーバー アクション
セマンティクス以外に、ビュー アクションとサーバー アクションに対して異なるディスパッチ メソッドを作成する理由はありますか? 私が見たすべてのチュートリアルと例 (特にこれ) は、ペイロードのアクション タイプをオンにするために、ディスパッチされたペイロードをリッスンするときにソース定数を完全に無視します。
このパターンがフラックスの例で広く使用されているのには理由があると思いますが、これが役立つ理由についての具体的な例はまだ見ていません。おそらく、ストアで動作するかどうかを判断するために、追加の if またはスイッチをペイロード ソースに追加することができますが、私が見た例では、この定数をまったく考慮していません。これについての考えは大歓迎です。
javascript - サンプル チャット アプリでの Flux アーキテクチャの誤解
Flux example chat appを理解しようとしています。著者は、この単方向データ フローについて言及しています。
ただし、サンプル アプリでは、Action Creators
( ChatMesssageActionCreator ) とStores
( MessageStore ) の間、およびStores
( MessageStore、ThreadStore ) とWeb API Utils
( ChatMessageUtils ) の間に依存関係があり、一方向のデータ フロー ルールに反しているようです。
与えられた例に従うことをお勧めしますか、それともより良いパターンを設計する必要がありますか?
アップデート
ChatMessageUtils は Web API Utils に属していないことがわかったので、store からの 2 つの矢印はそこを指すべきではありません。したがって、問題ない可能性があります。ただし、ActionCreators と Store の間の接続はまだ奇妙に思えます。
javascript - ログインフローでパーミッションセンシティブなアクションを処理する React/Flux の方法
私は React/Flux で遊んでいますが、許可に敏感なアクションを処理するための「Flux Way」に頭を悩ませています。
包括的な質問: ログインしていない訪問者がログインを必要とするアクションを試みた場合、(a) ユーザーがログインしているかどうかを確認する、(b) ログインフローを開始する、(c) の Flux の方法は何ですか? ) 成功したらアクションを終了しますか?
ユーザーが投稿するためにログインする必要があるフォーラム アプリの例を見てみましょう。
コメント フォーム コンポーネント (ほとんどは FB の React tut から取得) があります。
コメント ストア (省略形)
そして、セッションを処理するためのストア (省略形も):
私の最初の考えは、これは Flux のwaitFor()
方法のケースであるということでした。ただし、上記の実装は、設定されるとすぐに (戻るとすぐに)waitFor
依存ループを閉じるため、失敗します。SessionStore.dispatchToken
ensureCurrentUser
これは、ペイロードを に渡しensureCurrentUser
、次に のルート ハンドラに渡す必要があるケース/login
ですか? これらのタイプのフローを処理する Flux の方法は何ですか?
前もって感謝します :)
javascript - ReactJS ネストされたリスト (flux)
React をいじっていて、ネスト リストに問題があります。プロジェクトと todo の 2 つのリストがあり、各 todo には がありproject_id
ます。これらのリストに関連する 4 つのコンポーネントがあります。これは、プロジェクトの ID に設定された独自のプロパティを持つ のprojects-component
リストをレンダリングします。はtodosのリストを取得するために依存する関数を渡し、4 番目のコンポーネントのリストをレンダリングします。project-component
todos-component
projectId
todos-component
TodosWatchMixin
getTodos
component.props.projectId
todo-component
(ここには表示されていません。) 新しいプロジェクトをリストに追加するまで、すべてがうまく機能します。プロジェクトは表示されますが、todo アイテムがシフトします。新しいプロジェクトには別のプロジェクトの todo が含まれており、プロジェクトの残りの todo のほとんどもシフトしているように見えます... React Chrome Dev Tool を使用すると、新しいプロジェクトに独自の ID があることがわかりますが、アイテムのリストもあります...何が欠けていますか?
コードの一部を次に示します。
プロジェクト-component.js
project-component.js
todos-component.js
プロジェクト-store.js
ここで進行中の作業を見ることができます。またはを押してテスト データをロードしctrl+shift+L
、command+shift+L
新しいプロジェクトを追加すると、新しいプロジェクトにファーム リストの項目が表示されるはずです。