Лучшая практика для обработки ошибок в Redux и React

у меня есть асинхронная функция в моих действиях redux, и она возвращает такой объект в моем редукторе:

{
user: {},
fetching: false,
fetched, false,
error: null
}

поэтому в основном, когда я начинаю вызывать асинхронную функцию, я обновляю состояние redux до fetching: true и если результат успешно выполнен, то fetched:true и fetching:false
Поэтому я сопоставляю состояние redux с реквизитом, используя connect в react-redux, и я добавил Это в функцию рендеринга моего компонента:

if(this.props.fetched) {
  // Go to next page
}

и он автоматически переходит к следующему страница после извлечения данных.
Однако у меня есть проблема с обработкой ошибок. Когда ошибка изменяется от null до error, как мне обрабатывать обработку ошибок в моем компоненте react. Что у меня есть это:

if(this.props.error != null) {
   // popup error
}

но теперь я оказываюсь в ситуации, когда в следующий раз я назову свое действие, у него уже есть это.реквизит.ошибка, назначенная ошибке, и ее NOT null, что приводит к отображению всплывающего окна, даже если ошибки нет.
Должен ли я сбрасывать свою ошибку каждый раз, когда это отображается или есть какая-то лучшая практика делать все это?

9
javascript react-redux reactjs redux

2 ответов

можно использовать redux-catch middleware для захвата ошибок для Redux редукторов и промежуточных программ.

Вы можете использовать что-то вроде

import reduxCatch from 'redux-catch';

function errorHandler(error, getState, lastAction, dispatch) {
    //dispatch ERROR action as you need.
}

const store = createStore(reducer, applyMiddleware(
  reduxCatch(errorHandler)
));

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

7

У меня была аналогичная проблема, когда у меня был модальный продолжать отображать старые ошибки после закрытия модального. Я решил это, отправив действие "resetErrors" после того, как я получил успех через свой обратный вызов.

Я не сталкивался с лучшим решением, кроме "сброса" его каждый раз.

1