react-axios-middleware約束の処理

Question

私はredux-axios-middlewareを使用してXHR要求を行うReactアプリケーションに取り組んでいます。それはセットアップした方法はとても似index.js内のクライアントである：

const client = axios.create({ //all axios can be used, shown in axios documentation 
    baseURL:'https://api.vktest.xxx/api', 
    responseType: 'json', 
    validateStatus: function (status) { 
    return status >= 200 && status < 300 
    } 
}); 

const axiosMiddle = axiosMiddleware(client) 

export const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk, axiosMiddle))) 

私のコンポーネントから、私はそのようにように私のアクションを呼び出すいます：

store.dispatch(loginAction(credentials))

これはアクションです：

import { LOGIN } from './types' 

export function loginAction(credentials) { 

    return dispatch => { 
     return dispatch(doLogin(credentials)).then(
     response => { 
     dispatch({type: 'LOGIN_SUCCESS', response}) 
     }, 
     error => { 
     dispatch({type: 'LOGIN_FAIL', error}) 
     throw error 
     } 
    ) 
    } 
} 

function doLogin(credentials) { 
    return { 
    type: LOGIN, 
    payload: { 
     request: { 
     url: '/login/', 
     method: 'POST', 
     data: { 
      username: credentials.username, 
      password: credentials.password 
     } 
     } 
    } 
    } 
} 

XHR呼び出しを行うためにaxios-middlewareによって捕捉されたdoLogin機能をディスパッチします。呼び出しの後、axiosの約束はLOGIN_SUCCESSまたはLOGIN_FAILのいずれかの型を含んでいます。 Axiosはこれらのタイプを自動的に送出し、減速機はそれらに作用することができます。ここまでは順調ですね。

しかし、私は可能な限り明確にしようとしていますが、Axiosリクエストが失敗した場合、Axiosの約束は拒否され、LOGIN_FAILタイプが送出されます。その約束が解決されて以来、.then(..).catch(..)ブロックはいつも.thenと呼ばれています。 Axuchコールバックではなく、ディスパッチコールバックを処理する.thenブロックで、醜い何かをするとAxiosエラーを処理するように見えません。次のclearifyする

が起こっている：

store.dispatch -> action -> doLogin -> axios -> reducer -> back to action dispatch.

私はaxiosと減速工程との間XHRのエラーを処理したいが、私はやるとき：

import { LOGIN } from './types' 

export function loginAction(credentials) { 

    return dispatch => { 
     return dispatch(doLogin(credentials).then(
     response => { 
     dispatch({type: 'LOGIN_SUCCESS', response}) 
     }, 
     error => { 
     dispatch({type: 'LOGIN_FAIL', error}) 
     throw error 
     } 
    )) 
    } 
} 

function doLogin(credentials) { 
    return { 
    type: LOGIN, 
    payload: { 
     request: { 
     url: '/login/', 
     method: 'POST', 
     data: { 
      username: credentials.username, 
      password: credentials.password 
     } 
     } 
    } 
    } 
} 

私は次のエラーを取得します：

Uncaught TypeError: doLogin(...).then is not a function 
    at authentication.js:6 

私がしたい理由現在のセットアップは、以下を送出するので、これは修正：

LOGIN_FAIL

画像（axios）とLOGIN_SUCCESS（ディスパッチ）の両方に見られるように呼ばれています。たとえば、失敗したログイン試行のフィードバックをユーザーに与えることができるようにするために、私はAxiosエラーを自分自身で処理できるようにしたいと考えています。どういうわけか私はどのように把握することができません。

誰かが私を助けることができますか？

Answer 1

私はあなたが意味することを知っていると思います。

ミドルウェアの設定でreturnRejectedPromiseOnErrorを設定することで、その動作を変更できます。

promiseはチェーンアクションに対してのみ返されることに注意してください。このオプションを設定すると、常にcatchコールバックを適用する必要があります。そうしないと、unhandled rejection when calling Promiseのエラーが発生します。これは、コンポーネントがすでにアンマウントされているときにこれらのコールバックが発生する可能性があるため、コンポーネントで処理するときに問題が発生する可能性があります。

イム私のコード私は、これらの副作用を避けるために、できるだけ多くのthenを回避しようが、私は私の持っているとき、それは好きですか：

fetchSomething.then(action => { 
    if(action.type.endsWith('SUCCESS')) { 
     .... 
    } 

})