如何从 axios 拦截器更新状态

Question

我希望有一个通用的方法来显示错误。我尝试添加响应拦截器，但我的状态没有更新。

interceptor.js

import {showError} from "./actions";
const axiosInstance = axios.create();

axiosInstance.interceptors.response.use(
    response => response,
    error => {
        showError(error);
    }
);

export default axiosInstance;

actions.js

export const showError = (error) => {
    return ({
        type: SHOW_ERROR,
        payload: error.response
    })
}

reducer.js

const INITIAL_STATE = {errorData: ''};

const reducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case SHOW_ERROR:
            return {
                ...state,
                errorData: action.payload.data.translationKey,
            }
    }
}

我已经完成了所有导入，我可以在操作中看到错误，但我的状态没有得到更新。没有调用减速器。

有没有办法直接从拦截器更新状态？我想避免捕获每个 api 调用的错误。

Answer 1

尝试使用如下调度：

import {showError} from "./actions";
import reduxStore from './store'; << your redux store

const axiosInstance = axios.create();
const {dispatch} = reduxStore;

axiosInstance.interceptors.response.use(
    response => response,
    error => {
        dispatch(showError(error));
    }
);

export default axiosInstance;

Answer 2

如果你使用 redux Thunk 作为中间件

export const showError = (error) => dispatch => {
    return ({
        type: SHOW_ERROR,
        payload: error.response
    })
}