Как обрабатывать ошибки API в связанном компоненте реакции?

Question

Я хочу показать диалоговое окно при ошибке API (или 404).

Мои mapStateToProps и mapDispatchToProps выглядят так:

const mapStateToProps = state => {
  return {
     error: getError(state),
     customer: getCustomerDetails(state)
  }
}

const mapDispatchToProps = dispatch => {
   return {
     showErrorDialog: error => dispatch(showDialog(/*dialog props here*/))
   }
}

Что я делаю в компоненте:

componentDidMount(prevProps) {
   const {showDialog, error} = this.props
   if (error) return showDialog()
   // ...
   // rest of the code
}

Есть ли еще какие-либоместо, где я могу действовать на ошибку, отличную от componentDidMount?Может быть в mapStateToProps или mapDispatchToProps, чтобы компонент контейнера вообще не перерисовывался.

Answer 1

В методе рендеринга:

{this.props.error && <Dialog />}

Там, где ваш диалог является компонентом с сообщением об ошибке.

Как только ошибка верна, появится диалоговое окно.