redux-sagaとfetchを使用した自動ハンドル401の応答

Question

私はバックエンドへの非同期呼び出しを行うために、「安全な」アプリケーションを構築しており、redux-sagaとfetchjsを併用しています。

私のバックエンドは、ユーザーが承認されていないときに401のステータスコードを返します。私はこの「例外」をグローバルに捕捉し、アクションをディスパッチして私のリアクションアプリケーションがログイン画面に行くようにします。

私は次の解決策を見つけました：https://github.com/redux-saga/redux-saga/issues/110しかし、この場合、401の処理は、私たちが構築するすべてのサガで明白でなければなりません。

すべてのサガにコードを追加すると、より複雑になります。また、開発者が401コードを処理するコードを追加することを忘れてしまう可能性も高くなります。

この401応答をグローバルに処理する良い方法はありますか？

Answer 1

私はredux-sagaを使用しません。あなたが必要とすることはできません。

代わりに、店舗、API層などを設定する際にAPIレイヤーを設定すると、発生したすべてのエラーに対してハンドラが呼び出されます。

レポートするAPIレイヤのサンプルは、エラーハンドラを呼び出します。

const conf = { 
    onError:() => {}, 
} 

api.onError = (cb) => { 
    conf.onError = cb; 
} 

api.get = (url) => { 
    fetch(url) 
     .then(response => { 
      if (response.ok === false) { 
       return conf.onError(response); 
      } 
      return response; 
     }) 
     // Network error 
     .catch(conf.onError) 
} 

アプリケーションを設定します。

import store from './store'; 

// Configure your API wrapper and set error callback which will be called on every API error. 
api.onError((error) => { 
    store.dispatch({ 
     type: 'API_ERROR', 
     payload: error, 
    }); 
}); 

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

通常、APIをコールします。エラーが発生した場合、アクションはストアに送信され、このアクションに反応する場合としない場合があります。