問題タブ [reactjs-flux]

ストア ライフサイクルに関する質問の補足として、

典型的な Web アプリでは、URL を介して現在のアプリケーション状態へのショートカットがあると便利です。これにより、その状態に再度アクセスし、進むボタンと戻るボタンを使用して状態間を移動できます。

Flux では、すべてのアクションがディスパッチャを通過するようにします。これには、URL の変更も含まれると思います。フラックス アプリケーション内で URL の変更をどのように管理しますか?

私は todoapp-flux の例のソースを読んでいて、TodoStore.js でこれを見ました:

1 つのプロパティの値を変更するだけでなく、なぜ facebook が 2 つのオブジェクトをマージすることを選択したのか疑問に思っていました。そうするメリットはありますか？

Facebook の Flux Architecture を使用して開発された Web アプリがあります。このページには 2 つのビューがあります。1 つは TODO アイテムのリストを表示します。2 番目のビューには、TODO アイテムのランダムなセットが表示されます。

店舗が管理する必要がある懸念事項が明らかに 2 つあります。1 つ目は、利用可能な TODO のリストです。2 つ目は、ランダムに選択された TODO アイテムのリストです。

したがってTODOStore、利用可能な TODO アイテムを管理することのみに関心を持っている がいます。loadTODOs、addTODO、deleteTODO、へのアクションがありeditTODOます。起動時に、このストアはすべての TODO アイテムをロードしません。必要な場合にのみデータベースから TODO 項目のリストを取得したい。

2店舗目はRandomTODOListStore. ランダムに選択された TODO アイテムを管理するのが役割です。を使用して、 をRandomTODOListStore介して TODO アイテムにアクセスする必要があるように思えます。TODOStoreTODOStore.getTODOItems()

これに関する問題は、前述のように、TODOStoreが起動時に TODO 項目をロードしないことです。

問題は、「が TODO 項目を既に取得したことをどのようにRandomTODOListStore保証するのか?」ということです。TODOStore.

Javascript (React JS) を使用して、左右の矢印キーをリッスンする必要があるコンポーネントを構築しています。私のコンポーネントは、画像のリストを持つカードです。画像をクリックすると表示されるのですが、左右の矢印キーを押して画像をナビゲートできるようにしたいです。

ネストされた div がたくさんあり、どれに onKeyPress リスナーを割り当てる必要があるかを把握しようとしています。現在、多くの div に割り当てられていますが、イベントが発生していません。

フラックスのチュートリアルでは、「アプリケーションの状態はストアでのみ維持されます」と書かれています。this.stateしたがって、私には、react のコントローラービューにも、 を呼び出すコールバックを介してストアとの同期が保たれているという直感に反するように思えますsetState()。

ステートフルなコントローラービュー自体をストアとして使用する方が理にかなっているのではないでしょうか? このように、「状態」という単語がアプリに表示されるのは店舗だけです。そして、すべての非ステートフル (または非ストア) ビューは のみを使用しますthis.props。

this.state基本的に、その状態を使用するビューとその状態を管理するストアがあるのはなぜですか?ビュー自体はそれを管理できないのでしょうか? this.stateそれが変数のポイントだと思いました。

Fluxxor を使用してイベント ディスパッチャを提供する React アプリケーションのテストを書いています。これを機能させるには、内部で使用され、Node 自体によって提供されるいくつかのモジュールをモックしないように Jest に指示する必要があります。

つまり、それらをunmockedModulePathPatterns構成キーに追加するだけではなく、代わりに次のようなコードを使用する必要があります。

しかし、それを置くのに役立つ場所が見つかりません。setupEnvScriptFileほとんどすべてのテストで使用するいくつかのグローバルをセットアップする がありますjestが、そのコンテキストではオブジェクトを使用できないように見えるため、そこにモックを設定することはできません。

describeちょっとした一時しのぎの手段として、Fluxxor ストアをテストするブロックの最初に呼び出す関数で上記のコードをラップしましたが、理想とはほど遠いものです。