Делать запрос каждую минуту, используя React / Redux

Question

У меня есть приложение, которое позволяет пользователям искать твиты по определенной теме. При поиске твиты будут отображаться в списке. Как только все твиты будут отображены в списке, я хочу, чтобы приложение автоматически загружало новые твиты в список без необходимости делать что-либо. Я пытаюсь сделать это с помощью функции setTimeOut, извлекаемой из API каждую минуту, но она просто оказывается бесконечным циклом. Как я могу достичь этого? Делать это с Redux.

Компонент списка

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.tweets !== this.props.tweets) {
      try {
        setInterval(async () => {
          this.props.fetchPosts(this.props.symbol);
        }, 3000);
      } catch (e) {
        console.log(e);
      }
    }
  }

Answer 1

Вы не должны использовать componentDidUpdate, а вместо этого просто дайте реагировать-редуксу позаботиться о размещении новых сообщений в компоненте. Поскольку этот опрос каждую минуту выполняется вечно, пока вы больше не увидите компонент, componentDidMount и componentWillUnmount ваши друзья.

intervalID = null;

componentDidMount() {
    // Poll once every minute for new posts
    this.intervalID = setInterval(
        () => this.props.fetchPosts(this.props.symbol),
        60 * 60
    );
}

componentWillUnmount() {
    clearInterval(this.intervalID);
}

Answer 2

Возможно, ваша проблема с условием if, если вы сравниваете два объекта, результат в этом случае prevProps.tweets !== this.props.tweets всегда будет истинным, что вызовет цикл. В этом случае вы должны сравнить по-другому, как JSON.stringify(). Пример:

let a = { attr1: 1, attr2: 2 };
let b = { attr1: 1, attr2: 2 };

// Comparing two objects with '==='
console.log(a === b) // false

// Comparing two objects with 'JSON.stringify()'
console.log(JSON.stringify(a) === JSON.stringify(b)) // true

Ссылка: Сравнение объектов в JavaScript