問題タブ [redux-thunk]

したがって、リクエストにaxiosを使用し、アクションをディスパッチするためにredux-thunkを使用する、この単純な非同期リクエスト アクション クリエーターがあります。異なるリクエストに対して同じアクション クリエーターを再利用したいので、各リクエストには独自の状態があります。いくつかのコードを示してから、さらに説明します。これが私のアクション作成者です

そして、私のレデューサーreducerRequest :

ここから問題が始まります

レデューサーを次のように組み合わせます。

私のコンポーネントでは：

問題: アクション クリエーターをさまざまなリクエストに再利用したいと考えています。どうやって

1. 呼び出しmakeRequest('www.defaults.com')、それはで終わるdefaults
2. 呼び出しmakeRequest('www.updates.com')、それはで終わるupdates

これを解決するために想像できる唯一の方法は、すべてのリクエストに対して独自のアクションクリエーターと独自のリデューサーを作成することです-たくさんのコピーペーストだけです-それは正しくありません。

アクションクリエーターとリデューサーを再利用して、コンポーネント内にdefaultsとの 2 つの個別のインスタンスを作成するにはどうすればよいですか?updates

を使用しReactてRedux、Redux-thunkサーバー リクエスト (API 呼び出し) を通じて初期状態を取得したいのですが、これを機能させることができないようです。

私がこれまでに得たもの：

これが私の最初のストア作成です。私InitialStateはこのように見えます：

loadInitialこれを に変換しようとすると$.get('api/...')、Redux は、それを機能させるには初期状態が必要であると教えてくれます。

私のレデューサーには、load メソッドがあります。

ただし、デフォルトで非同期呼び出しを使用すると、機能しないようです。

私が実際に望んでいるのは、データベースから取得したものでストアを初期化することです。プロパティをテーブルに渡すため、これは HandsonTable に必要です。初期状態にはオブジェクトが 1 つしかないため、現在は 1 行しかレンダリングされません。

これに関する奇妙な部分は、テーブルをクリックすると、データがロードされているため、実際にはすべての行が取得されることですが、遅すぎると推測しています。

とにかく、ここでの私の質問は、バックエンドへの API 呼び出しを介してストアを初期化するにはどうすればよいですか?

redux、react-redux、redux-thunk をセットアップしようとしています。おおむねうまくいっていると思いますが、複数の非同期アクションを連鎖させたときにどのように見えるかについて質問があります。

具体的には、アクションを呼び出すことができる別のアクションによって、アクションを個別にまたは間接的に呼び出すことができるシナリオがあります。selectItem私の質問は、慣用的にしたい場合、どのように作成する必要がありますか?

action.js

私の Redux アプリは、モジュール性のために個々のコンポーネントに分割されています。appドメインは、インジケーターの読み込みなどの一般的な UI の変更を処理する一種の共有インフラストラクチャ コンポーネントです。

ルート レデューサーでは、このcombineReducers関数を使用して、ドメインに従って状態ツリーを適切に分割します。

したがって、私の状態ツリーは次のようになります。

では、サーバーからデータを取得する場所に非同期機能usersを追加したいと思います。これは、または promise ミドルウェアのproductsようなものを使用すると簡単です。redux-thunkしたがって、 のアクション作成者は次のusers/actions.jsようになります。

products自身も fetch と同様のことを行う可能性があることに注意してください。
現在、これらのアクションを処理し、サブツリーusersReducerにさまざまな状態の小道具を設定します。users問題は、サブツリーにも a を設定しloading: trueてapp、高レベルのappコンポーネントが適切な読み込みインジケーターをレンダリングするようにしたいということです。しかし、状態ツリーの そのスライスusersReducerは得られません。

combineReducersすべてのレデューサーに状態ツリー全体を送信するカスタムを作成せずに、これを実装するエレガントな方法は何ですか? クリーンでスケーラブルなソリューションを探しています。私が検討したいくつかのアプローチは次のとおりです。

1)appReducer新しいリクエストごとに応答するようにします。これは、フェッチ用の新しいアクション タイプを作成するたびに、次のように追加する必要があることを意味しapp/app_reducer.jsます。

appReducerこれに関する問題は、読み込みインジケーターを必要とする新しいアクションを作成するたびに変更する必要があることです。

2) 2 番目の方法は、次のように非同期アクションから呼び出される 2 つのアクションをさらに作成することですstartLoading。stopLoading

最初の考えでは、これは良いアイデアのように思えましたが、1 つではなく 2 つのアクションを呼び出すのは非常に無駄に見えます。

これはよくある問題だと思いますが、実用的で「実生活」の提案は見つかりませんでした。この問題に対する他のアプローチや、与えられた提案についての考えを聞かせていただければ幸いです。

Redux ソース コードのこの行でわかるように、アクションにはtypeプロパティが必要です。ソース コード リポジトリの実際のtype例では、プロパティが宣言されていない、このようなアクションがあります。

ここCALL_APIで参照されるのは JavaScript シンボルです

補足として、Mozilla サイトから、配列ブラケットを使用してシンボルにアクセスしているようです。

それで、redux コードに戻ると、明示的な型なしでアクションを処理するミドルウェアは、CALL_API によって作成されたプロパティにアクセスするようです...

上記の最初のコードに戻ると、このように呼び出し API の周囲から配列ブラケットを削除すると、

「アクションには未定義の「タイプ」プロパティがない可能性があります」というエラーが表示されます。

質問: たとえば、fetchUser 関数でのシンボルの (正しい) 使用は、アクションの型プロパティの要件をどのように満たしますか?

件名は、この問題をかなり明確に要約しています。

アイテムを DB に投稿してから、POST 要求から新しいコレクションを取得しようとしています。

最初のコンソール ログは起動しますが、残りは起動しません。「ディスパッチ起動」ログを取得できないため、makeStaffEntry をテストできません。

ストア構成