reactjs - 如何处理 Redux/React 应用程序中的 401 错误

Question

我正在使用 React 和 Redux 构建一个网站，并且我有一个关于应该如何处理 401 状态响应的疑问。

目前，当 API 报告 401 HTTP 状态时，它通常会被我的某个操作捕获并调度:

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

相关的reducer会检查HTTP状态代码，我有一些Redux中间件来检查这个HTTPStatus状态值并做出相应的 react 。

是否有一种更优雅的方式可以以一般方式处理这些错误？我正在使用 Axios 处理 HTTP 请求。

Answer 1

添加全局响应拦截器，在发生错误时调度操作

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;
}