Redux/Reactアプリケーションで401エラーを処理する方法

Question

私はReactとReduxでサイトを構築していますが、どのように401ステータス応答を処理する必要があるかについての質問があります。 APIは401 HTTPステータスを報告したとき

は現在、それは通常、自分の行動の一つに巻き込まれて、私は派遣：

return dispatch({ 
    type: 'FETCH_MONTHLY_DATA_FAILURE', 
    error: response.data 
}); 

および関連減速は、HTTPステータスコードをチェックし、私はいくつかのReduxのミドルウェアそのチェックを持っていますこのHTTPStatus状態値に対して、それに応じて反応します。

これらのエラーを一般的な方法で処理できるよりエレガントな方法はありますか？私は私のHTTPリクエストにAxiosを使用しています。

Answer 1

を発生したときにあなたが言ったアクションをディスパッチするグローバルな対応のインターセプタを追加します。

をと関連減速が使用

... HTTPステータスコードをチェックしますミドルウェアは素晴らしいですが、減速機はhttpステータスをチェックすべきではありません。それは目的外です。 documentationから

：

減速ジョブが 応じてどのようにアプリケーションの状態の変更を指定することです。

アクションクリエイターは純粋である必要があります。すべての非同期コードは別の場所に存在する必要があります。

副作用はそれを行うには多くの方法があります

減速に属していません。それはすべて好みになります。

オプション1（最も強力な1）：ここで

は、よりエレガントな方法でHTTPリクエストを処理するための3つの方法ですジェネレータ、サガと非同期操作の複雑なチェーン

redux-sagaは、あなたがすることができますちょうどそれをしなさい。私は個人的にこのミドルウェアを使用して、私のAPI呼び出しと応答を処理します。

メンタルモデルは、サガは、副作用の原因となるアプリケーションの アプリケーション内の別のスレッドのようなものです。 reducex-sagaは reduxミドルウェアです。つまり、このスレッドは、開始、一時停止、および通常の還元アクションでメインアプリケーションからキャンセルされたことを意味します。 完全還元アプリケーション状態へのアクセスがあり、還元型 アクションもディスパッチできます。ここで

私は、このオプションを使用することから得る利点です：複数のサガ（約束との複合体）のアプリケーション（サガ）の単一ドメインへ

• 分離株副作用コード
• 構図
• 約束の定型訴訟を軽減
• クリエイターは純粋にテストするのが簡単です！以下のような使用例

簡素化の実装：大規模なマルチユーザー、マルチ部門のブログで

• 、ユーザーはこれまで はその後、「RSSフィードを購読する」ボタンをクリックした場合次に ユーザーが専用のRSSフィードを持つセクションにアクセスしたときは、このセクションのフィードを購読するように助言を受けてください。 ユーザーは アプリケーションの特定の機能を使用したことはないが、前述の 機能が潜在的に有用であるかもしれないという状態に到達した場合は、オンラインIDEで

• は、 この機能を導入するヘルプダイアログを表示します。 stackoverflowので

• 、ユーザーが質問に答えるたが、 質問はあなたが 質問が変更されたことをユーザに知らせるOPによって変更されていないと答えは、もはや潜在 有効です。など

redux-observable

は別のオプションです：

構成し、副作用などを作成するための非同期アクションをキャンセルします。

オプション2：アクションのクリエイターでアプリケーションの操作で非同期操作を駆動させるインテリジェンスを置く

redux-promiseまたはredux-thunkが良いexemplesです。

これまでのところとても良いです。カップリングを削除し、非同期ロジックを別の場所に分けて、クリーンなアーキテクチャにしました。しかし、redux-sagaのより高度な機能は複雑なユースケースを簡素化します。ここで

はReduxのサンクの要旨です：Reduxの-サンクまたはReduxの-約束のような

非同期ミドルウェアは、 店舗のディスパッチ（）メソッドをラップし、例えば、アクション以外 他の何かを派遣することができます機能または約束を含む。 を使用しているミドルウェアは、ディスパッチしたものをすべて解釈し、次に アクションをチェーン内の次のミドルウェアに渡すことができます。たとえば、Promise ミドルウェアはPromiseを傍受し、各Promiseに応答してbegin/endのペアを非同期にbegin/end ディスパッチすることができます。

オプション3：高次成分

高次の成分（HOCs）による管理の副作用は、既存のコンポーネントクラスに機能を追加するJavaScript関数です。 Reactコンポーネントを使用すると、アプリケーションに機能を追加できるように、Higher-Orderコンポーネントではコンポーネントに機能を追加できます。あなたはそれらがコンポーネントのコンポーネントだと言うことができます。

Not ideal for all use cases !

Exemple：axiosは、約束に基づくHTTPブラウザのクライアントとは、Node.jsの

オプション4：発電機との約束、サンセリフサガ

最後になりましたが、フロントエンドで非同期制御フローを管理するためにジェネレータを使用することができます。ただし、高度な機能を必要としない場合は、redux-thunk依存関係を追加する必要はありません。

Answer 2

エラーが

import store from './store'; 

// Add a response interceptor 
axios.interceptors.response.use(function (response) { 
    // Do something with response data 
    return response; 
}, function (error) { 
    // Do something with response error 
    store.dispatch({ 
     type: 'API_ERROR', 
     payload: error, 
    }) 
    return Promise.reject(error); 
}); 

// In you reducers... 
reduce(state, action) { 
    if (action.type === 'API_ERROR' && action.payload.statusCode === 401) { 
     return { // whatever needed } 
    } 
    return state; 
}