問題タブ [redux-promise]

私が知っている限り、私が間違っている場合は修正してください。redux-thunkは、非同期関数をディスパッチし、アクション自体で値をデバッグするのに役立つミドルウェアですが、redux-promiseを使用すると、独自の実装なしでは非同期関数を作成できませんでしたアクションとしてのメカニズムは、プレーン オブジェクトのみをディスパッチする例外をスローします。

これら 2 つのパッケージの主な違いは何ですか? 単一ページの反応アプリで両方のパッケージを使用する利点はありますか、または redux-thunk に固執するだけで十分でしょうか?

私は React 、 Redux を数か月前から使用しています。エコシステムで最も紛らわしい部分の 1 つは、非同期データ フローです。多くの優れたソリューションが利用可能であり、問​​題に適したソリューションを選択することは難しい部分です.

私のアプリケーションでは、アクション クリエーターはほとんどの場合、バックエンドAPI に対して async axios [ajax] 呼び出しを行います。Redux-Promise をミドルウェアとして注入すると、非同期データ フローの問題が解決されます。

スケーラブルなアプリを考えると、アクション クリエーターで複数の axios 呼び出しをチェーンする必要があるかもしれません。Redux-Promise をミドルウェアとして引き続き使用できると思います。これにより、アプリの非同期データ フローが処理されます。

一般的に、チームは Redux-Thunk を使用する傾向が強く、この問題の構文がより複雑に感じます。私のアクション作成者のほとんどが axios 呼び出し (約束) のみを行っていることを考慮して、これら 2 つのフレームワークを評価する際に提案が必要です。Redux-thunk hereに関する多くの議論を見てきました。thunk がいかに役立つかを理解しました。. しかし、Promises のみに使用する場合に Redux-Promise と Redux-Thunk を一緒に評価することについて、さらに明確にする必要があります。そのような状況でどのミドルウェアが優れているか、またその理由は? Redux-Promise よりも Redux-Thunk を使用すると、どのような利点がありますか? それともありませんか？

React Router を使用した Redux アプリがあります ( https://github.com/este/esteに基づく)。

1 つの Route 内に、複数の AJAX 呼び出し ( redux-promise-middleware&によって起動されるredux-thunk) がある場合があります。ページが (経由で) 変更されると、残りのすべてまたは前のルートによって起動されたコールバック react-routerを拒否したいと考えています。_SUCESS_FAILEDactions

これを行う最善の方法は何ですか？

redux を使用して次の非同期ロジックをモデル化したいと考えています。

1. ユーザー アクションにより、一連の非同期 API 呼び出しがトリガーされます。
2. API 呼び出しで 401 ステータスが返される場合がある (ログイン タイムアウト)
3. API が 401 で応答した場合、再ログインのポップアップを表示する
4. 再ログインに成功したら、API 呼び出しを再発行して続行します

このロジックをどこに置くべきかわかりません。アクションは他のアクションを認識せず、ディスパッチにしかアクセスできないため、停止して完了するのを待つことはできません。レデューサーはディスパッチにアクセスできないので、そこに置くことはできません…では、それはどこにあるのでしょうか? カスタムミドルウェア? store.listen? スマートコンポーネントで？

現在、redux-promise-middleware と redux-thunk を使用しています。redux-saga や redux-rx などへの賛同を必要とせずに、このタイプのフローをどのように編成するのが最善でしょうか?

また、API 呼び出しを透過的に中断して他のアクションを実行する最善の方法もわかりません。つまり、API 呼び出しは、オプションのログイン プロセスが完了するまで、完了または失敗したアクションをトリガーしてはなりません。

私は自分のアクションでリクエストを作成しています - 一部のデータをコンポーネントにロードする必要がある API からプルしています。コンポーネントがマウントされるときにそのリクエストを開始しますが、Redux-Promise が返され続けるため、Redux-Promise を正しく動作させることができないようです。

componentWillMount メソッド内の値を console.log しようとすると、開発ツールで。

以下は私のコードです：

ストア & ルーター

アクション

レビューレデューサー

ルートリデューサー

成分

どんな助けでも大歓迎です。ありがとうございました。

アプリのデータ ソースは、XML 形式のデータのみを提供します。

axios を使用して XML データを取得します。結果のデータ セクションに文字列として表示されます。

xml2jsを使用して変換しようとしましたが、非同期ジョブを起動して戻るだけなので、redux-promiseミドルウェアが機能しません。レデューサーがデータをレンダリングする必要があるコンポーネントにデータを送信するとき、ペイロードは何もありません。

これが理にかなっているかどうかはわかりませんが、コンポーネントでデータを送信する前に、新しい関数呼び出しが戻るのをレデューサーに待機させることはできますか?

アクション index.js

私の減速機

私は反応するのが初めてで、モジュール式の React ベースのアプリケーションで通信を分離する最良の方法は何か疑問に思っています。実際、私の問題は、React アプリケーションによって消費される RESTful API に対する単純な古い JavaScript 抽象化です。

何かが発生したことを API 抽象化のコンシューマに通知する必要があります (発生時にサーバーでセッションがタイムアウトしました)。

通常は、pub sub / イベント バスを使用します。

別の共有reduxレイヤーを追加することを検討しましたが、それでもすべてを結合しますが、結合をメディエーターであると思われる共有モジュールに委任します。

私はこれについてオンラインで多くを見つけることができません。

誰でもこれについて考えましたか？

ありがとう