問題タブ [redux-thunk]

React、Redux、Thunk を組み合わせて使用​​すると、次のようになります。

アクション.js

reducer.js

上記の 2 つのスニペットはうまく収まり、Redux の意図に沿っているように感じます。コンテナーにヒットする前に、応答で返されるフィールドにいくつかの変更を加えたいと思います。

たとえば、応答は次のようになります。

そして、私はそれを次のように変更したいと思います(簡単にするための簡単な例):

これまでの研究

オプション 1 Redux の非同期の例を見ると、ここで応答に軽いタッチがあることがわかります: https://github.com/reactjs/redux/blob/master/examples/async/actions/index.js#L33

オプション 2 他の Stackoverflow の質問を見ると、リデューサーは状態を変更するものであるべきなので、それをアクションから除外する方が理にかなっていると思います (しかし、これは実際には状態としてカウントされないのでしょうか?): Redux - データを準備する場所

オプション 3 これはミドルウェアの仕事であるという傾向があります。それが normalizr の処理方法ですが、非パッシブなミドルウェアの例が見つかりません。ミドルウェアがここにある場合、ミドルウェアはある種の SET_STATE アクションをディスパッチする必要がありますか、それともミドルウェアで状態を自由に更新できますか?

編集

次のようないくつかのミドルウェアで実験しました。

それはうまくいくようです - これは本当にミドルウェアの意図ですか? 元の質問が保持されます-理想的な場所はどこですか?

投稿のリストを表示する Redux アプリケーションがあります。状態は多かれ少なかれ次のとおりです。

に追加するいくつかの投稿をロードするたびにposts、 のコンテンツを置き換えvisible_post_idsます。

これは、投稿をロードするための私のアクション作成者です:

私の質問は次のとおりです。サンクから 2 つ (またはそれ以上) のイベントをディスパッチするのは慣用ですか? それとも、1つだけディスパッチして、さまざまなリデューサーで処理する必要がありますか?

この質問のようなユースケースを考えると：

関連する状態フィールドを分割レデューサーで更新する最良の方法は?

自分の状態の外にある状態に依存するレデューサーのアクションを処理するためのベスト プラクティスは何ですか? 上記の質問の作成者は、状態ツリー全体を 3 番目の引数としてすべてのレデューサーに渡すだけになりました。これは手荒で危険なようです。Redux FAQ には、次の潜在的な解決策がリストされています。

• レデューサーが状態の別のスライスからのデータを知る必要がある場合、1 つのレデューサーがより多くのデータを処理できるように、状態ツリーの形状を再編成する必要がある場合があります。
• これらのアクションの一部を処理するために、いくつかのカスタム関数を作成する必要がある場合があります。これには、combineReducers を独自の最上位レデューサー関数に置き換える必要がある場合があります。
• reduce-reducers などのユーティリティを使用して、combineReducers を実行してほとんどのアクションを処理することもできますが、状態スライスにまたがる特定のアクションに対してより特化したレデューサーを実行することもできます。
• redux-thunk などの非同期アクション作成者は、getState() を介して状態全体にアクセスできます。アクション作成者は、状態から追加のデータを取得してアクションに入れることができるため、各レデューサーは自身の状態スライスを更新するのに十分な情報を持ちます。

私のユースケースでは、複数フォーム/複数ステップのプロセスでユーザーが移動できるページを決定するアクション「続行」があります。これはアプリの状態全体に大きく依存するため、できません。私の子レデューサーのいずれかでそれを処理します。今のところ、ストアをアクション クリエーターに引き込みました。ストアの現在の状態を使用して、アクティブなページを変更する「ページ」リデューサーを起動するアクション オブジェクトを計算します。おそらく redux-thunk をインストールし、このアクション クリエーターで getState() を使用しますが、まだこのアプローチにはコミットしていません。

この方法で処理する必要があるアクションは (これまでのところ) 1 つしかないため、これはそれほど悪い解決策ではないと思います。より良い解決策があるかどうか、状態とレデューサーを再構築して簡単にする方法があるかどうか、または私がやっていることは Redux のベストプラクティスの範囲内であるかどうか疑問に思っています。似たような例があれば、それも役に立ちます。

もう少しコンテキストを与えるために、現在の状態ツリーは次のようになっています。

アクティブなページは、ユーザーが次のページに進むためにデータを入力する必要があるページ/セクションです)。アクティブなページの決定は、ほとんどの場合、アイテムの状態に依存し、注文の状態に依存する場合もあります。最終結果は、ユーザーがいくつかのフォームに連続して入力し、フォームが有効になったら続行を押すアプリです。続行すると、アプリは必要な次のページを判断して表示します。

編集:子レデューサーと組み合わせて「グローバル」レデューサーを実装するアプローチを試しました。

実装はこんな感じ…

グローバル レデューサーは最初にアプリ全体の状態で実行され、その結果が子レデューサーに渡されます。状態のさまざまな部分を読み取るためだけに、アクション クリエーターに大量のロジックを追加する必要がなくなったという事実が気に入っています。

すべてのアクションがすべてのレデューサーにヒットし、レデューサーが呼び出される順序は常に同じであるため、これは redux の原則に沿っていると思います。この実装について何か考えはありますか？

編集: 現在、ページの状態を処理するためにルーター ライブラリを使用しているため、activePage と pagesById はなくなりました。

アプリケーションでreactjs、react-router、reduxを使用しています。私は非同期アクションを使用しています。以下は私のaction.jsコードです

以下は私のstore.jsコードです

以下は私の reducer.js コードです

アクションをディスパッチするたびに、ブラウザーコンソールに次のエラーが表示されます

警告: [react-router] 「ルーター ルート」は変更できません。それは無視されます

これを「react-router-redux」で解決しようとしましたが、解決しません。

アクションクリエーターに構成を注入する「Redux」の方法とは何ですか?

非同期アクション作成者を考えてみましょう:

ご覧のとおりAuthService、(および他のすべてのサービス) には、通常、次のようなものを定義する構成が必要です:baseUrlなどheaders。

次のような方法で、それらをそれ自体requireで d にします。AuthService

多くの理由で次善であり、特定のサービス インスタンスに対してそれらをオーバーライドすることはできません。

ミドルウェア ( redux-thunk.

1. getState私にとって、特に編集可能な場合、構成はアプリケーションの状態の一部であるため、すでに を介して既に注入されている可能性があります。

2. クリエイターごとのオーバーライドはまだ許可されていません

コンテナー コンポーネントからアクション クリエーターに構成を直接渡すことは、this.props.dispatch(login(username, password, config));非常に冗長です。

現在、別のコンポーネントでのディスパッチ後のデータ変更に基づいて、コンポーネントでアクションのディスパッチを処理する方法を概念化しようとしています。

次のシナリオを考えてみましょう。

dispatch(someAjax)-> 状態更新中のプロパティ。

この後、同じプロパティに依存する別のコンポーネントが必要です。それが更新されたことを認識し、新しい値に基づいてアクションをディスパッチします。

ある種のvalue.on(change...ソリューションを使用するのではなく、このタイプのアクション「カスケード」を処理するための好ましい方法は何ですか?

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

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