Как назвать это действие обновления непрерывным фоновым заданием

Question

Это часть электронного приложения, это действие вызывается нажатием кнопки обновления в пользовательском интерфейсе. Я хочу сделать автообновление. Как мне это сделать?

Компоненты / counter.js:

export default class Counter extends Component<Props> {
  props: Props;

  render() {
    const {
      refresh,
      counter
    } = this.props;
    return (
      <button onClick={() => refresh()}>
        Refresh
      </button>
    );
  }
}

действия / counter.js:

export function refresh() {
  // Do some local CRUD here.
  return {
    type: NO-OP
  };
}

Answer 1

Вы можете создать функцию, которая постоянно вызывает setTimeout и останавливается, когда компонент отключен:

Пример

class Counter extends Component {
  runRefresh = () => {
    this.timer = setTimeout(() => {
      this.props.refresh();
      this.runRefresh();
    }, 1000);
  };

  componentDidMount() {
    this.runRefresh();
  }

  componentWillUnmount() {
    clearTimeout(this.timer);
  }

  render() {
    const { refresh, counter } = this.props;
    return <button onClick={() => refresh()}>Refresh</button>;
  }
}

Answer 2

Я предполагаю, что вам необходимо регулярно обновлять приложение.

Итак, в redux создателях действия вы можете написать: Здесь refreshInterval определяется в действии создателя.

startRefresh(){
  refreshIntervalId = window.setInterval(() => {
    refresh();
  }, 3000);
}

ИЛИ, если вы просто возвращаете объект действия из функции refresh, вам следует использовать redux-thunk

startRefresh => dispatch => (){
  refreshIntervalId = window.setInterval(() => {
    dispatch(refresh());
  }, 3000);
}

Эту функцию startRefresh можно вызвать в методе componentDidMount жизненного цикла основного компонента приложения ИЛИ из компонента, который вы хотите.

componentDidMount(){
    this.props.startRefresh()
}

Также вы должны сохранить id этого интервала и очистить интервал при componentWillUnmount методе жизненного цикла.

componentWillUnmount(){
    this.props.clearRefreshInterval()
}

clearRefreshInterval будет просто:

clearRefreshInterval(){
    window.clearInterval(refreshIntervalId);
}