Как обрабатывать 401 ошибки в приложении Redux/React

Я создаю сайт с React и Redux, и у меня есть запрос о том, как я должен обрабатывать 401 ответ состояния.

В настоящее время, когда API сообщает о состоянии HTTP 401, он обычно попадает в одно из моих действий, и я отправляю:

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

и связанный редуктор проверяет код состояния HTTP, и у меня есть промежуточное по Redux, которое проверяет это значение состояния HTTPStatus и реагирует соответствующим образом.

есть ли более элегантный способ справиться с этим ошибки в общем виде? Я использую Axios для своих HTTP-запросов.

6
reactjs redux

2 ответов

Вы сказали :

и связанный редуктор проверяет код состояния HTTP...

использование промежуточного ПО отлично, но редуктор не должен проверять состояние http. это было бы вне его цели.

с документация :

задание редуктора-указать, как изменяется состояние приложения в ответ.

ваши создатели действий должны быть чисто, все асинхронные коды должны жить где-то еще.

побочные эффекты не принадлежат в редукторах

есть много способов сделать это. Все сводится к предпочтениям.

вот 3 способа обработки HTTP-запросов более элегантным способом:

Вариант 1 (самый мощный) : генераторы, саги и сложные цепочки асинхронных операций

redux-saga позволяет сделать именно это. Я лично используйте это промежуточное ПО для обработки вызовов и ответов api.

ментальная модель заключается в том, что сага похожа на отдельную нить в вашем приложение, которое несет полную ответственность за побочные эффекты. обертывание-сага промежуточное по redux, что означает, что этот поток может быть запущен, приостановлен и отмены от основного приложения с нормальными действиями, я полагаю, он имеет доступ к полному состоянию приложения redux, и он может отправить redux действия что ж.

вот преимущества, которые я получаю от использования этой опции:

  • изолировать код побочных эффектов в одном домене приложения (sagas)
  • композиция из нескольких саг (комплекс с обещаниями)
  • уменьшает действие шаблона обещания
  • создатели чисты настолько легче проверить!

упростить реализацию вариантов использования, таких как:

  • в большом многопользовательском, мульти-отдел блог, если пользователь когда-либо нажмите на кнопку" подписаться на RSS-канал", затем в следующий раз пользователь посещает раздел, который имеет выделенный RSS-канал, показать ему / ей предложение подписаться на ленту этого раздела.

  • в онлайн-среде IDE, если пользователь никогда не использовал определенную функцию заявление, но прибыло в государство, что вышеупомянутое функция потенциально может быть полезна, показать диалоговое окно справки этот особенность.

  • в stackoverflow, пока пользователь отвечал на вопрос, вопрос был изменен OP, поэтому вы сообщаете пользователю, что вопрос был изменен, и ответ потенциально больше не существует действительный.

  • etc.

redux-observable другой вариант :

создание и отмена асинхронных действий для создания побочных эффектов и многое другое.

2 : поместите интеллект, который управляет асинхронными операциями в операциях приложения в actions creators

redux-promise или redux-thunk хорошие образцы.

пока все хорошо. Мы удалили соединение, отделили нашу асинхронную логику где-то еще и имеем чистую архитектуру. Однако более продвинутая функция redux-saga упростит сложные варианты использования.

вот суть redux thunk :

асинхронный промежуточного слоя вместе подумать и вместе обещают обертывания метод dispatch () магазина и позволяет отправлять что - то другое чем действия, например, функции или обещания. Любое промежуточное вас использование может интерпретировать все, что вы отправляете, и, в свою очередь, может пройти действия для следующего промежуточного ПО в цепочке. Например, обещание промежуточное ПО может перехватывать обещания и отправлять пару begin/end действия асинхронно в ответ на каждое Обещать.

Вариант 3: Управление побочными эффектами через компоненты более высокого порядка

компоненты более высокого порядка (HOCs) - это функции JavaScript, которые добавляют функциональность к существующим классам компонентов. Просто как реагируют компоненты позволяют добавить функциональность в приложение, компонент высших порядков позволяют добавить функциональность компонентов. Можно сказать, что это компоненты для компонентов.

не подходит для всех случаев использования !

Exemple: axios, HTTP-клиент на основе обещания для браузера и узла.js

Вариант 4: генераторы и обещания, без саг

и последнее, но не менее важное: вы все еще можете использовать генераторы для управления асинхронным потоком управления в frontend без добавления зависимости redux-thunk, если вам не нужны некоторые из его дополнительных функций.

7

добавить глобальный перехватчик ответов, который отправляет действие при возникновении ошибки

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