Как обработать несколько запросов API, чтобы показать индикатор загрузки из одной переменной в хранилище - PullRequest
Новая
       4

Как обработать несколько запросов API, чтобы показать индикатор загрузки из одной переменной в хранилище

0 голосов
/ 14 мая 2018

Я хотел показать загрузчик для каждого запроса в отдельности, в зависимости от того, какой запрос сделан. Предположим, на панели инструментов у меня есть несколько виджетов, и у них у всех разный вызов API, я хотел показать разный загрузчик для каждого сделанного запроса,

Одним из способов является добавление флага isLoading для каждого сделанного запроса, что, я думаю, не является хорошим решением по мере роста приложения, и я нахожу решение, которое может обрабатывать несколько запросов от одного флага

как мне сделать индивидуальный загрузчик на основе каждого запроса

ниже мой редуктор и действие

редуктор 

export const intialstate = {
isAuth: false,
isLoading: false,
btnDisable: false
};

export default function(state = intialstate, action) {
switch (action.type) {
    case API_REQUEST:
        return {
            ...state,
            isLoading: true,
        };
    case API_SUCCESS:
        return {
            ...state,
            isLoading: false,
            isError: null
        };
    case API_FAILURE:
        return {
            ...state,
            isError: action.payload,
            isLoading: false,
        };
    // no default
 }
 return state;
}

action.js 

export const AnyAPIRequest = () => {
return (dispatch) => {
    dispatch({
        type: API_REQUEST
    });

    API.anygetcall()
        .then((res) => {
            dispatch({
                type: API_SUCCESS
            });

            dispatch({ type: GETLIST, payload: res });
        })
        .catch((err) => {
            dispatch({
                type: API_FAILURE,
                payload: err
            });
        });
};
};

Пожалуйста, помогите, как реализовать динамический загрузчик на основе другого запроса, и дайте мне знать, что нужно обновить в текущем рабочем процессе

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

Если вы не хотите добавлять новый isLoadingXXX для каждого нового запроса API, вы можете использовать коллекцию и дать каждому запросу API идентификатор строки.Примерно так:

Редуктор: 

export const intialstate = {
  isAuth: false,
  isLoadingRequestIds: [],
  btnDisable: false
};

export default function(state = intialstate, action) {
switch (action.type) {
    case API_REQUEST:
        return {
            ...state,
            isLoadingRequestIds: [...state.isLoadingRequestIds, action.requestId],
        };
    case API_SUCCESS:
        return {
            ...state,
            isLoadingRequestIds:
                state.isLoadingIds.splice(state.isLoadingRequestIds.indexOf(action.requestId)).slice(),
            isError: null
        };
    case API_FAILURE:
        return {
            ...state,
            isError: action.payload,
            isLoadingRequestIds:
                state.isLoadingIds.splice(state.isLoadingRequestIds.indexOf(action.requestId)).slice(),
        };
    // no default
}
return state;
}

Действия: 

export const AnyAPIRequest = (requestId) => {
  return (dispatch) => {
      dispatch({
          requestId,
          type: API_REQUEST
      });

      API.anygetcall()
          .then((res) => {
              dispatch({
                  requestId,
                  type: API_SUCCESS
              });

              dispatch({ type: GETLIST, payload: res });
          })
          .catch((err) => {
              dispatch({
                  requestId,
                  type: API_FAILURE,
                  payload: err
              });
          });
  };
};

export const StudentAPIRequest = () => AnyAPIRequest('student');
export const TeacherAPIRequest = () => AnyAPIRequest('teacher');
0 голосов
/ 14 мая 2018

Два способа:

  1. Загружать целочисленные вызовы API.IsLoading: IsLoading + 1 и затем покажите индикатор загрузки, если IsLoading > 1
  2. Назовите каждый из ваших IsLoading по-разному, чтобы показать разные индикаторы загрузки.Например, если бы вам звонили, чтобы получить студентов, и звонили, чтобы получить учителей, у вас были бы IsLoadingStudents и IsLoadingTeachers и были бы отдельные индикаторы загрузки для каждого компонента в приложении
...