問題タブ [refluxjs]

私のシナリオは非常に具体的ですが、Flux のより大きな問題について語っていると思います。コンポーネントは、ストアからのデータを単純にレンダリングする必要がありますが、コンポーネントがステートフルなサードパーティ コンポーネントをレンダリングする場合はどうなるでしょうか? Flux のルールに従いながら、このサードパーティ コンポーネントとやり取りするにはどうすればよいでしょうか?

したがって、ビデオプレーヤーを含む React アプリがあります ( clapprを使用)。良い例はシークです。プログレス バーの場所をクリックすると、ビデオ プレーヤーが表示されます。これが私が今持っているものです（RefluxJSを使用）。コードを最も関連性の高い部分に落とし込もうとしました。

このコードのバグは、同じ場所を 2 回シークしようとした場合です。動画プレーヤーが継続的に再生されていると想像してください。プログレスバーをクリックしてシークします。マウスを動かさず、数秒待ちます。プログレスバーの前と同じ場所をもう一度クリックします。の値はdata.seekTo変更されていないためwindow.player.seek、2 回目は呼び出されません。

これを解決するためのいくつかの可能性を検討しましたが、どれがより正しいかはわかりません。入力が要求されました...

seekTo1：使用後リセット

単純にリセットするseekToのが最も簡単な解決策のように思えますが、それは確かにエレガントではありません。最終的に、これはバンドエイドのように感じます.

これは次のように簡単です...

2: パススルーのように機能する別のストアを作成する

基本的には を聞くのSeekStoreですが、実際には、これはパススルーとして機能し、ストアというアクションのようになります。このソリューションは Flux のハックのように感じますが、うまくいくと思います。

window.player3:自分の行動の中で対話する

考えてみると、呼び出しは実際にはアクションなので、これは正しいと思います。唯一の奇妙な点は、アクション内での操作window.player.seekが正しくないと感じることです。windowたぶん、それはただの不合理な考えです。

ところで、部屋には私が触れていない別のゾウがいます。私のすべての例で、プレーヤーは として保存されwindow.playerます。Clappr は古いバージョンではこれを自動的に行っていましたが、Browserify で動作するように修正されましたが、window(技術的負債) に保存し続けています。明らかに、私の 3 番目の解決策はその事実を利用することですが、これは技術的に悪いことです。とにかく、誰かがそれを指摘する前に、理解し、注意してください。

4: シーク経由dispatchEvent

また、カスタム イベントをディスパッチすることで仕事が完了することも理解していますが、Flux が整っていることを考えると、これはかなり間違っているように感じます。これは、自分の Flux アーキテクチャの外に出て、仕事をやり遂げているような気がします。私はそれを実行して、Flux プレイグラウンド内にとどまることができるはずです。

次の React-Reflux コードを es6 化しようとしています。

ソース

react-decoratorを使用してこれを変換する方法がわかりません。これは私がそれを変換したものです：

babel ( にstage設定0) でコンパイルできますが、うまく動作しません。これを修正する方法はありますか？また、ストアをes6化することは可能ですか？

別のコンポーネント内で 2 回レンダリングされるコンポーネント (テキスト入力を実行する) があります。

テキスト入力コンポーネントのいずれかでキーを押すと、それぞれに通知されます...

コンポーネントは のような時間文字列を取り、"14:30"時間と分の部分を入力できるようにする必要があります。

逆流作用:

還流ミックスイン:

React コンポーネント:

TimePicker別の React コンポーネントから 2 回レンダリングします...

...そして、"01"いずれかのインスタンスの分の入力内に入力すると、次のログが表示されます。

私が間違っていることについて何か考えはありますか？

Reactはステートレス コンポーネントの使用を可能な限り推奨し、ステートフルな親コンポーネントでそれらを管理します。これにより、ステートレス コンポーネントがより再利用可能になり、管理が容易になることを理解しています。ただし、極端な場合、App.js などの最上位コンポーネントに常に状態を配置し、長い props チェーンを介して情報とコールバックを渡すことができます。また、Flux を使用している場合は、アクションもいつでもディスパッチできます (コールバックを介して実行されます)。

それで、ステートフル コンポーネントとステートレス コンポーネントを分離するための線は何だろうと思っています。また、Flux を使用している場合、アクションをどこにディスパッチする必要がありますか?

--- 例を追加 ---

ツールバーと表示されるコンテンツを備えた Web アプリのような Google ドキュメントがあるとします。コンポーネント構造になると思います。

ツールバーには、太字テキスト ボタンなど、表示内容に影響を与えるボタンがあります。

では、アプリは onButtonPressed コールバック プロパティをツールバーに渡し、アクションをそれ自体でディスパッチする必要がありますか、それともツールバーにそれ自体を行わせる必要がありますか?

アプリは contentString 小道具をコンテンツに渡す必要がありますか、それともコンテンツ自体にストアの変更をリッスンさせる必要がありますか?

ありがとう！

React と ReFlux を利用するプロジェクトに取り組んでいます。現在、ReFlux ストアは 1 つだけですSubscriptionStore.js。これには、サブスクリプションに添付された各「タイトル」に関する詳細を含むネストされたオブジェクトの配列など、ユーザーのサブスクリプションに関する単純な詳細が含まれています。

背後にあるデータの簡単な内訳は次のSubscriptionStore.jsとおりです。

ユーザーが既存のタイトルの名前を更新したり、新しいタイトルを追加したり、タイトルを削除したりできる React コンポーネントがあります。追加と名前の変更はうまくいっていますが、削除は動作がおかしくて、React/ReFlux をまだ完全に把握していないためだと確信しています。

このメイン コンポーネントの関連コードは次のとおりです。

そして、からの関連するコードのビットSubscriptionStore.js:

問題

どのタイトルをクリックして削除しても、削除されるのは常に最後のタイトルです。コンテンツの前後を吐き出すthis.subscriptions.accountTitlesと、正しいオブジェクトが実際にデータから削除されていることが示されますが、React は常に最後のアイテムが削除されているかのように要素をレンダリングしています。

何が起こっているのでしょうか？

これまでのところ、パラメーターを介してあるコンポーネントから別のコンポーネントにプロパティがどのように渡されるかについての私の知識の範囲は次のとおりです。

//start: 私の知識の範囲

topicA.jsx で呼び出される状態変数が存在するとします。これを B.jsx に渡したいので、以下を実行します。

B.jsx では、次のようなことができます

呼び出されると、「今日のトピックは天気です!」と表示されます。

//end:​​ 私の知識の範囲

今、私は、次のコード スニペットを使用して、react-router のチュートリアルを行っています。

トピック.jsx:

ルート.jsx:

header.jsx:

ここthis.state.topicsで、Reflux を介して imgur API から取得されたトピックのリストです。

私の質問は: topic.jsxparamsに渡されるメカニズムは何ですか? propsコードのどこにも、「私の知識の範囲」に関する上記のセクションで表現されているイディオムはありません。<Topic params = {this.state.topics} />routes.jsx にも header.jsx にもありません。完全なリポジトリへのリンクはこちら. React-router のドキュメントには、params は「元の URL のパス名から解析されたもの」であると書かれています。これは私の心に響きませんでした。