изменить глобальное состояние в избыточности от действий перед возвратом к компоненту - PullRequest
0 голосов
/ 01 марта 2020

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

последовательность кода:

  1. Вызовы компонентов Todo -> fetchTodoAPI [Action]
  2. fetchTodoAPI, если вызываются ошибки -> serverErrorHandler [Action]
  3. serverErrorHandler возвращает (hasError = true, Error = error_object) -> компонент todo
  4. компонент Todo проверяет, возвращен ли hasError = true -> Компонент ErrorRedirection
  5. ErrorRedirection устанавливает глобальное состояние и, в соответствии с ним, перерисовывается со страницей ошибки

Что я хочу сделать:

  1. Вызовы компонента Todo -> fetchTodoAPI [Action]
  2. fetchTodoAPI, если вызываются ошибки -> handleServerError [Action]
  3. serverErrorHandler устанавливает глобальное состояние напрямую и принудительно выполняет повторную визуализацию

код, представляющий компоненты:

компонент Todo:

componentDidMount() {
        this.fetchTodos();
      }

      fetchTodos = async () => {
        const response = await actions.fetchTodosList(this.state.activePage);
        response.hasError ? this.setState({ hasError: response.hasError, error_object: response.error ,isPageLoading: false})
          : this.setState({ todos: response.data.reviews, meta: response.data.meta, hasError: false, isPageLoading: false });
      }
  render() {
    return (
        {
          this.state.hasError === true ? <ErrorRedirection error={this.state.error_object} />
            :

метод fetchTodo:

  const response = await axios.get(process.env.REACT_APP_DOMAIN_URL + url,
    { headers: headers, params: { page: pageNo } })
    .then(response => response)
    .catch(function (error) {
      return actions.serverErrorHandler(error)
    });
  return response;

Метод serverErrorHandler: * 104 2 *

export const serverErrorHandler = async (error) => {
  let error_object = {
    error_code: null,
    error_message: null,
    error_info: "Something went wrong, please try again later",
    AlertMsg: "Something went wrong, please try again later",
    variant: "danger",
    history: null,
    redirect: true,
    show: false,
    button_text: "Go Back"
  }

  if (error.response) {
    // The request was made and the server responded with a status code
    // that falls out of the range of 2xx
    switch (error.response.status) {
      case 401:
        return await {
          hasError: true, error:
            actions.logout()
        }
      case 403:
   ...
    error_object = {
      ...error_object,
      error_code: null,
      error_info: error.response,
      show: true,
      redirect: false
    }
  }
  return ({ hasError: true, error: error_object })
};

Компонент ErrorRedirection подключен к Redux:

  componentDidMount() {
    this.props.onRoutingError(this.state.error)
  }

const mapDispatchToProps = dispatch => {
  return {
    onRoutingError: (error) => dispatch(actions.error_handler(error))
  };
};
export default withRouter(connect(null, mapDispatchToProps)(ErrorRedirection));

Действие обработчика ошибок, вызываемое ErrorRedirection:

export const error_handler = (error_object) => {
  return {
    type: actionTypes.ROUTING_ERROR,
    error: {
      error_code: error_object.error_code,
      error_message: error_object.error_message,
      error_info: error_object.error_info,
      history: error_object.history,
      AlertMsg: error_object.AlertMsg,
      show: error_object.AlertMsg,
      variant: error_object.variant,
      button_text: error_object.button_text,
      redirect: error_object.redirect
    }
  }
};

То, что я до сих пор пробовал:

1) Добавление метода отправки в возврате serverErrorHandler, но это не сработало 2) Попытка ожидания возврата при вызове обработчика ошибок, также не сработало

У кого-нибудь есть идеи?

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

Примечание. Приведенный выше подход в настоящее время работает, но я работаю над его улучшением.

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...