Subotinn
@Subotinn

Как валидировать ответы от API в redux (в частности react native)?

Приведу пример стандартного экшена для обращения к API:
const loginStart = () => {
    return {
        type: AUTH_LOGIN
    };
};

const loginSuccess = (payload) => {
    return {
        type: AUTH_LOGIN_SUCCESS,
        payload: payload
    };
};

const loginFail = (payload) => {
    return {
        type: AUTH_LOGIN_FAIL,
        payload: payload
    };
};

export const login = (data) => (dispatch) => {
    dispatch(loginStart());

    return fetch(API_ENDPOINT, {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
        .then((response) => response.json())
        .then(
            (response) => {
                    dispatch(loginSuccess(response.response));
            }
        ).catch(
            (error) => {
                dispatch(loginFail(error));
            }
        );
};


Возник ряд вопросов с парсингом реквеста и тд.
1) Должен ли я доверять API и доверять тем данным, что оно возвращает?
Нужно ли делать проверки типа?
if (response.status == 'success') {}
или такую проверку
if (response.data) {} //убедиться что data точно есть

или следующую проверку:
if (response.data.token && response.data.token.length > 0) {} // Удостоверимся что токен есть в ответе


2) Как и где необходимо проверять ответы от сервера?
Если у пользователя пропал интернет, то реквест возвратит 500, необходимо ли обработать это в мобильном приложении?
Если я таки проверяю response от сервера, и он не совпадает с моими ожиданиями, как обрабатывать эти ошибки? Делать throw new Error() ? И ловить эти же ошибки в catch, на ряду с 500 400 ошибками?

3) В общем случае проверки на 500 400 или на status от api request будут повторяться, куда их выносить?
Может быть отдельный middleware или какой-то сервис отдельный написать для этого?
  • Вопрос задан
  • 247 просмотров
Пригласить эксперта
Ответы на вопрос 2
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Начну с конца:

3) можно сделать функцию helper, типа check status
приведу пример кода из старого проекта (не async / await, но не суть)
export function checkStatus(response) {
  let json = response.json() // http://stackoverflow.com/a/29475662/1916578

  if (response.status >= 200 && response.status < 300) {
    return json
  } else {
    return json.then(window.Promise.reject.bind(window.Promise))
  }
}

export function httpGet(url) {
  return fetch(url, {
    headers: buildHeaders(),
  })
  .then(checkStatus)
}


и уже везде пользоваться httpGet для гетов, например. Конечно, можно расширить пример как вам нужно с необходимыми диспатчами и тд тп.

2) проверять необходимо всегда, чтобы пользователь понимал что происходит:
- вероятно у вас отпал инет
- на сервере ошибка, попробуйте еще раз

Думаю, стоит это начинать делать в catch у каждого запроса

1) если API не ваше - то делайте проверки, какие посчитаете нужными

Если API ваше, то проверки тоже необходимо делать, но в основном это нужно для обработки ошибок от сервера/сети.
Ответ написан
Комментировать
raoffonom
@raoffonom
React Native Developer
Если у вас REST API, то учите Redux Saga
Если GraphQL API, то лучшее решение Apollo Сlient.
Эти библиотеки, в том числе, заточены под решения ваших задач.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 мар. 2024, в 10:00
10000 руб./за проект
29 мар. 2024, в 09:59
750 руб./в час
29 мар. 2024, в 09:55
50000 руб./за проект