私は人々が自分の反応+還元アプリケーションでネットワークコールをどのように整理するかのベストプラクティスと考えられるものについていくつかの考えを得ようとしています。私は通常、コンポーネントが呼び出しを行い、データを取得し、それを減らすアクションに渡します。これはベストプラクティスですか、それとも、ネットワークからコンポーネントを分離し、そのロジックをアプリのどこかに置いてください。react + reduxアプリケーションでネットワークコールを行う場所
あなたのアクションクリエイターには、ネットワーク通話に最適な場所があります。しかし、あなたはその仕事を最も良くするためにいくつかのミドルウェアが必要になります。このpromise-middlewareを見てください（実際には、チュートリアル全体をチェックすることをお勧めします）。そのミドルウェアを使用する場合は、約束を返すアクションクリエイターを持つことができます。また、3つのアクションタイプ（1つはリクエスト用、もう1つは成功したレスポンス用、もう1つは失敗したリクエストを処理する）を持つことができます。それであなたはあなたのレデューサーの3つの行動を聞くだけです。
だからミドルウェアで、あなたはこのようなアクションの作成者を持つことができます：
明らかfunction networkCall() {
return {
types: ['MAKE_REQUEST', 'REQUEST_SUCCESS', 'REQUEST_FAILURE'],
promise:() => {
return new Promise((resolve, reject) => {
$.ajax({
url: 'example.com/api'
type: 'GET'
});
})
}
}
}
あなた自身の約束ミドルウェアを構築するのは自由ですが、それは正しい方向にあなたを設定する必要があります。
私はかなりredux tutorials for Async Actionsのアクションのパターンに従います。コンポーネントとストア/レデューサーの両方から離れて、すべてのアクションを非同期にすることは、私にとって最も理にかなっています。
また、Redux Crudを使用して、ネットワーク操作に関連する操作を標準化します。
redux-api-middlewareなどのAPIミドルウェアを使用できます（write oneにはあまり難しくありません）。
{type: 'API_GET', url: '/api/userList', nextType: 'USER_LIST'}
のようなアクションを返すことができます...それは、後に実際の要求を送信し、その後のような新しいアクションをディスパッチうミドルウェアによって処理される
{type: 'USER_LIST_FETCHED', status: 200, payload: [{id: 1, ...}, ...]}
{type: 'USER_LIST_FAILED', status: 404, payload: {message: '...'}}
これはAngularで正しく行われたことの1つだと思います。 servicesには、すべてのネットワーク通話がきれいに配置されています。これはReduxで簡単に行うことができます。
ドキュメントでは、ネットワーク通話がactionsにあることを正しく示唆しています。私はそれらを別の場所に分解したいと思っています。あなたはそれを「サービス」と呼ぶことができます。ここでは、APIサーバーのURL、認証関連のものなどのすべての定数を定義します。これは、ネットワーク呼び出しの実装の詳細を認識する唯一の場所です。これは、使用するライブラリ（jQuery、Axios、等）。
アクションファイルは、これらのサービスから関数をインポートして呼び出します。ネットワークライブラリを交換することを後で決める場合は、actionsを変更する必要はありません。