Stop React Ax ios Опрос после 5 ошибок - PullRequest
Новая
       7

Stop React Ax ios Опрос после 5 ошибок

0 голосов
/ 07 февраля 2020

Я внедрил механизм опроса в своем приложении реакции на уведомления. Поэтому каждые 2 секунды я отправляю запрос на мой API (в другом домене) и проверяю, есть ли новые уведомления.

Иногда мой API отключен. Мои приложения продолжают отправлять запрос каждые 2 секунды. Теперь я хочу реализовать это после 5 ошибок - должен быть перерыв, например, на 10 минут. Проблема в том, что когда мой API не работает, я получаю много ошибок в консоли браузера (см. Приложение ErrorCount in Console)

Вот как я реализовал опрос.

withPolling. js

import * as React from "react";
import { connect } from "react-redux";

export const withPolling = (pollingAction, duration = 2000) => Component => {
  const Wrapper = () =>
    class extends React.Component {
      componentDidMount() {
        this.props.pollingAction();
        this.dataPolling = setInterval(() => {
          this.props.pollingAction();
        }, duration);
      }
      componentWillUnmount() {
        clearInterval(this.dataPolling);
      }
      render() {
        return <Component {...this.props} />;
      }
    };
  const mapStateToProps = () => ({});
  const mapDispatchToProps = { pollingAction };
  return connect(mapStateToProps, mapDispatchToProps)(Wrapper());
};

Мой компонент, который будет установлен в моем Navbar, который отправляет опрос при аутентификации пользователя NotificationsButtonNavbarWithPolling.jsx 

import { loadNotifications } from "../../redux/actions/notificationAction";
import { withPolling } from "../../Utilities/withPolling";

class NotificationsButtonNavbarWithPolling extends React.Component {
  componentDidMount() {
    let headroom = new Headroom(document.getElementById("navbar-main"));
    // initialise
    headroom.init();
  }

  render() {
    return (
      <UncontrolledDropdown navbar-nav left>
        <DropdownToggle nav style={{ color: "#ffffff" }}>
          <i className="fa fa-bell nav-link-inner--text" />
        </DropdownToggle>

        <DropdownMenu right className="navbar-light">
          {this.props.notifications ? (
            <>
              {Object.entries(this.props.notifications).map(([key, value]) => (
                <DropdownItem key={key}>{value}</DropdownItem>
              ))}
              )}
            </>
          ) : (
            <>
              <Row>
                <Row>
                  <div>Notifications</div>
                </Row>
                <Row>
                  <div>There are no notifications yet.</div>
                </Row>
              </Row>
            </>
          )}
          <DropdownItem divider />
          <DropdownItem>
            <Button
              className="nav-link-inner--text ml-2"
              href="/allNotifications"
            >
              Show all Notifications
            </Button>
          </DropdownItem>
        </DropdownMenu>
      </UncontrolledDropdown>
    );
  }
}

const mapStateToProps = state => ({
  notifications: state.notifications
});

const mapDispatchToProps = {};

export default withPolling(loadNotifications)(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(NotificationsButtonNavbarWithPolling)
);

Запрос будет быть отправленным с топором ios - ничего особенного. У вас есть идеи?

...