問題タブ [refluxjs]

アプリケーションで Reflux アクションが正しくトリガーされていることをテストするのに苦労しています。実際、Jest ではまったく動作していないようです。私はこのサンプルテストを持っています:

どの出力:

ジャスミンの非同期関数を使用しても、機能していないようです

私に与える...

誰かがこれを機能させましたか？

Reflux を使用して React アプリを開発していますが、ストアをコンポーネントに接続する際に問題が発生しています。

これがコードです

問題は、Node コンソールで実行するとコードが機能することです。

しかし、テストを実行すると、イベントがログに記録されません。handleClick()ただし、が呼び出され、PostActionsオブジェクトがコンソールに出力されているため、クリックが発生していることはわかっています。

PostStore も初期化されています (確認のために console.log() がありました)。これにより、どういうわけか問題は React コンポーネントにあると思われますが、私が知る限り、コードは Reflux ドキュメントにあるものとまったく同じように見えます。

また、余談ですが、Jest テスト中にコードをデバッグするためのより良い方法はありますか? Rubyのbinding.pryのようなもの？

編集:私はテストを含めています:

React を Reflux で使用する場合、ストアには、コンポーネントがリッスンするイベントが 1 つしかありません。仮定して：

• 製品のリストを含む ProductStore があります
• このストアの変更をリッスンする 2 つのコンポーネントがあります。すべての変更に関心のある製品リストと、特定の製品の更新のみを考慮する詳細ページです。

「list_refreshed」イベントまたは「item_updated」イベントを区別するにはどうすればよいですか。最初のイベントは製品リストの完全な更新を通知し、後者は単に 1 つのアイテムの更新を通知しますか?

React を react-router および Reflux と共にデータストアとして使用していますが、ページの更新を許可するために永続性を処理する最善の方法がわかりません。

私のコンポーネントは Reflux.connect を使用してストアに接続しますが、ストアはバックエンドからデータを取得するため、コンポーネントが最初に初期化およびレンダリングされるときはまだ使用できません。

ユーザーが最初からアプリに入ると、このすべてのデータが順番に読み込まれ、必要なときに利用できるようになりますが、ルートをさらに下ってページの更新をトリガーすると、react は、そうでないデータに依存するコンポーネントをレンダリングしようとします。まだあります。

LocalStorage に常にデータのコピーを保持し、それを Reflux ストア getInitialState() から提供することでこれを解決し、すべてのコンポーネントがレンダリング前にデータを取得できるようにしました。

これが正しい方法なのだろうか。何らかの理由でローカル ストレージ データが消去されたり破損したりすると、コンポーネントが正しいデータにアクセスできないため、インターフェイスが空白になります。サブ構造とプロパティが存在せず、javascript エラーが発生します。面倒で信頼できない解決策のようです。

これを解決するためにどのようなパターンが使用されているか知りたいです。

------編集----- WiredPrairieのコメントに答えるには：

1) getInitialState でデータを使用してコンポーネントを初期化するのはなぜですか?

私のコンポーネントが Reflux.connect を使用する場合、ストアがデータを取得する必要があるため、最初のレンダリングではまだデータが状態にありません。私のビューは現在、未定義のデータでは適切に機能しません。getInitialState() で Reflux ストアからローカルに保存されたキャッシュを返すことにより、接続されているすべてのコンポーネントは、最初のレンダリング呼び出しの前にそのデータを取得します。

2) ページが更新される原因と、最初と同じようにデータをロードできないのはなぜですか?

これは主に、編集時にページを更新する livereload を回避するために構築しなければならなかった回避策ですが (後で react-hotloader の使用を検討しますが、まだオプションではありません)、ユーザーはネストされたビューのどこかにいるときに更新を押すこともできます。それは同じ効果があります。手動で更新すると、開始時にアプリに入っていません。

3) コンポーネントがストアの変更イベントに関連付けられている場合、コンポーネントが更新されないのはなぜですか?

それらは更新されますが、私が言ったように、彼らは現在空のデータを処理しておらず、最初のレンダリングで、ストアが何かを取得するのを待ってそれを見逃すでしょう. すべてのビューを空のデータで正常に動作させることはできますが、それでは多くのボイラープレート コードが追加されます。

これまでの回答から、私が localStorage で行っていることは一般的な方法であると感じています。localStorage や sessionStorage などにローカルにキャッシュし、更新直後にそのデータを提供します。

localStorage が適切に機能しないという奇妙な機会に空のデータを適切に処理することで、ビューをもう少し堅牢にする必要があります。

ドキュメントを読んでも、Reflux 非同期アクションの仕組みがよくわかりません。特に、非同期アクションが完了したときに何かをトリガーする必要があります。

コンポーネントの 1 つで、非同期アクションの完了をリッスンしてから、ビューに移行したいと考えています。

次のようにアクションを作成しました。

そして私のprojectStoreには次のようなものがあります：

しかし、actions.loadProject.completed は関数ではないため、上記のコードは機能しません。正しいアプローチは何ですか？

ここ数日、気になることがあり、気に入った解決策が思い浮かびません。私はrefluxjsを使用していますが、バニラフラックスにも適用できると思います。

たとえば、フラックス アクションを呼び出してフォーム データを API にポストし、モノを作成する React ComponentOne があるとします。

私のストアは、「オーケー、モノが投稿されています」イベントを発生させ、その後、「オーケー、モノが作成されました」イベントを少し発生させます。

ComponentOne はどのようにこれらのイベントを明確にする必要がありますか? ComponentTwo は同じアクションを呼び出した可能性があり、どの Thing-POSTed イベントがどのコンポーネントに対応するかはわかりません。

たぶん、ComponentOne のデータは失敗イベントになり、ComponentTwo は完了イベントになります... 2 つのイベントがありますが、どちらも両方のコンポーネントが予期するもっともらしいイベントであり、どちらがどちらであるかを判断する明白な方法はありません。

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

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

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