2016-04-14 6 views
15

アプリの状態を直接操作していない、いくつかのAjaxリクエストがあります。 react/reduxアプリケーションでは、コンポーネントで直接ajaxリクエストを送信するのではなく、これらのajaxリクエストに対してアクションをディスパッチする必要があります(または何か利点があります)。アクションクリエイターとレデューサーなしで、ReactとReduxでAJAXコールを送信できますか?

私のシナリオを単純化するために、私は基本的に私の還元状態のオブジェクトのリストを持っています。私は、新しいオブジェクトをデータベースに投稿するためにフォームを使用しています。投稿が成功すると、GETリクエストが送信されリストがフェッチされ、状態が更新されるリストページにリダイレクトされます。

新しいオブジェクトを投稿するためのAJAX呼び出しは、自分の状態を直接操作していません。

私は完全な3ステップの再来非同期通過していると働いているチームは、手順 例:'FETCH_REQUESTED''FETCH_SUCCESS'、すべてのAJAX要求に対するそれぞれの減速に伴い'FETCH_FAIL'、それはより減速ドンを追加するために大きな面倒です理にかなっているようだ。

答えて

33

コンポーネントから直接AJAXコールを直接送信することができます。

Reduxは、共有状態を複数のコンポーネントでグローバルに使用できるようにするツールであり、予測可能な方法で変更されました。あなたがこれを必要としない場合は、それをしないでください。

アクションクリエイターでAJAX呼び出しを保持することは、さまざまなコンポーネントが同じAPI要求を行い、同様の方法で状態を変更する場合に便利です。すでにキャッシュされているデータがある場合にリクエストを処理しないようにし、そのようなチェックをコンポーネント全体に分散するのではなく、単一の場所に保存したい場合にも便利です。

Reduxはグローバル状態の更新方法のみに関心があり、一部のコンポーネントからAJAXリクエストを作成する必要がある場合は、アクション作成者またはリデューサを作成する必要はありません便利。

多くの複雑なコンポーネントがある場合は、通常、Redux(とFlux)はコードをリファクタリングすると考えられます。です。すべてのコンポーネントをどのように起動するべきかではありません。必要な部分だけを使用することができます(たとえば、同期したものなど)、場合によってはそれを避けることもできます(折りたたみ可能なパネルは店舗内に状態を保存する必要はありません)。あなたが特定の状況であなたに与えた具体的な利点を理解しているときにのみ、それを使用してください。

があなたの具体的な例に対処するためにもmy answer to “How do dispatch a Redux action with a timeout?”

を参照してください、あなたはReduxのは、あなたを与える利点を使用する場合は、このためにReduxのを使用する場合があります:多分あなたは楽観フォームを更新して、新しいリストを右に表示するアクションを派遣しますそれを利用可能なときにフェッチされたリストとマージして、インタラクションが瞬時に現れるようにします。 は非同期アクションクリエータのユースケースです。この種のUXの複雑さを見ていないのであれば、Reduxはまったく必要ではないと私は思っています。

+0

ダン・アブラモフさんの答えに従うには - https:// githubを使用するとよいでしょう。com/gavriguy/react-indieあなたがグローバルな状態に設計によって接続したくない独立したコンポーネント(ウィジェットなど)用に特別に作られたコンポーネント(ちょうど作ったもの)。 – Gavriguy

+0

@DanAbramovちょっと質問:折りたたみ可能なパネル状態を店舗に置かないと、時間旅行とWebpackホットリロードの恩恵を受けることはありませんか? – Buzinas

+0

はい、折りたたみ可能なパネルロジックをデバッグするのにどれくらいの時間を費やしますか? ;-) –

0

は、それはあなたがそれらの詳細な行動と減速せずにAJAX要求の状態を管理するために助けることができるリンク

https://github.com/sskyy/redux-task

の下に使用してみてください。