Как получить доступ к коду состояния при сбое вызова Axios AJAX - PullRequest
Новая
       37

Как получить доступ к коду состояния при сбое вызова Axios AJAX

0 голосов
/ 27 сентября 2018

В нашем проекте мы используем промежуточное ПО Axios для выполнения вызова Ajax и для обеспечения согласованных типов действий, мы используем FSA (стандартное действие Flux) для структуры данных.Например, наши действия и редуктор выглядят так, как показано ниже 

//Action
 import { createAction } from "typesafe-actions";

 export const GET_USER = "GET_USER";

 // GET_USER_SUCCESS and GET_USER_FAILURE are automatically triggered from the axios 
    middleware
export const userActions = {
    getUser: createAction(GET_USER, () => ({
        type: GET_USER,
        payload: {
        request: {
            url: "/username",
        },
    },
  })),
getUserSuccess: createAction("GET_USER_SUCCESS", (data: string) => ({
    type: "GET_USER_SUCCESS",
    payload: {
        data: data // put returned data type here name: "nothing",},
    },
})),
getUserFailure: createAction("GET_USER_FAILURE"),
};

//Redux
import { RootAction } from "../actions/RootAction";
import { userActions } from "../actions/UserActions";
import { getType } from "typesafe-actions";

export const userReducer = (state = INITIAL_STATE, action: RootAction): UserState => 
{
    switch (action.type) {
        case getType(userActions.getUserSuccess): {
            return {
                ...state,
                username: action.payload.data,
            };
        }
    default:
        return state;
    }
};

Теперь, в случае сбоя вызова, я мог бы получить доступ к коду состояния из нижеуказанного enter image description here

Нужна помощь в получении доступа к коду состояния в действии или редукторе или в любом месте приложения.

1 Ответ

0 голосов
/ 28 сентября 2018

Вы можете создать функцию обработки ошибок в файле действий и использовать ее для отправки действий с подробными сведениями об ошибках.Затем просто поместите эту функцию в каждый оператор catch и получите доступ к ошибке в любом месте приложения.Пример реализации может выглядеть следующим образом (подход с избыточным редукцией):

Выборка данных 

export function fetchData() {
  return async (dispatch) => {
    try {
      const { data: payload } = await axios.get('https://jsonplaceholder.typicode.com/psosts');
      dispatch({
        type: FETCH_DATA,
        payload
      })
    } catch (error) { throwError(error, dispatch) }
  }
}

Ошибка обработки 

function throwError(error, dispatch) {
  const { status, statusText } = error.response;
  dispatch({
    type: THROW_ERROR,
    payload: { status, content: statusText }
  })
}

И редуктор для этого аналогичен любомудругой редуктор;)

...