Как использовать опрос в React с Redux Saga

Знаете ли вы, что такое опрос и как его использовать в React? Давайте углубимся в детали

Иногда в веб-приложении, которое отображает данные, предоставленные серверной службой, мы хотим, чтобы приложение автоматически обновляло данные без необходимости обновления страницы пользователем.

Среди различных методов, которые мы можем использовать для получения результата, мы находим:

• Опрос
• Веб-сокеты
• События, отправленные сервером

В этой статье мы рассмотрим технику опроса.

Что такое опрос? 📖

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

Опросы часто используются в ситуациях, когда обновления в реальном времени не являются критически важными или невозможными, например, в приложениях, которые отображают курсы акций, прогнозы погоды или каналы социальных сетей.

Несколько видов опроса

1. Опрос с фиксированным интервалом: клиент отправляет запросы на сервер с фиксированным интервалом, например, каждые 5 секунд.
2. Экспоненциальный опрос с отсрочкой: клиент экспоненциально увеличивает интервал между запросами каждый раз, когда получает пустой ответ или ответ с ошибкой от сервера. Это помогает предотвратить перегрузку сервера запросами, когда он находится под большой нагрузкой.
3. Долгий опрос: клиент отправляет запрос на сервер и держит соединение открытым до тех пор, пока сервер не получит новые данные для отправки обратно. Это уменьшает количество запросов, сделанных клиентом, и снижает нагрузку на сервер.

Давайте создадим пример, используя Redux Saga 🥁

Допустим, у вас есть приложение React, которое отображает список акций и их текущие цены. Вы хотите, чтобы цены обновлялись автоматически, и пользователю не приходилось обновлять страницу.

Вот как вы можете опросить серверную службу для достижения этой цели:

import { takeLatest, put, call, delay } from 'redux-saga/effects';
import { actionTypes, actions } from './actions';
import { fetchStocks } from './api';

function* pollBackendService() {
  try {
    const response = yield call(fetchStocks);
    yield put(actions.pollServiceSuccess(response));
  } catch (error) {
    yield put(actions.pollServiceError(error));
  }
}

function* startPollingStocks() {
  while (true) {
    yield delay(5000); // Poll every 5 seconds
    yield call(pollBackendService);
  }
}

function* rootSaga() {
  yield takeLatest(actionTypes.START_POLLING, startPollingStocks);
}

export default rootSaga;

В этом примере fetchStocks — это функция, которая делает запрос к серверной службе. Вместо этого pollBackendService — это функция-генератор, которая использует эффект call для вызова fetchStocks и эффект put для отправки действий на основе результата запроса.
startPollingStocks — это еще одна функция-генератор, использующая эффект delay для ожидания 5 секунд между каждым вызовом pollBackendService. Наконец, rootSaga — это точка входа в Saga, которая использует takeLatest для прослушивания действий, запускающих процесс опроса.

Чтобы начать процесс опроса, вы можете отправить действие START_POLLING из своего магазина Redux:

import { actionTypes, actions } from './actions';

store.dispatch(actions.startPollingStocks());

Выводы 💭

После того, как вы узнали, как объединять данные из серверной службы, вот список плюсов и минусов, которые следует учитывать при принятии этого решения:

Плюсы👍

1. Простота реализации. Опрос относительно легко реализовать, особенно по сравнению с более сложными методами связи в реальном времени, такими как веб-сокеты или события, отправленные сервером.
2. Резервный механизм. Опрос можно использовать в качестве резервного механизма, когда методы связи в реальном времени не поддерживаются или невозможны.
3. Уменьшение нагрузки на сервер. Благодаря таким методам, как длительный опрос, опрос может помочь снизить нагрузку на сервер за счет уменьшения количества запросов, отправляемых клиентом.
4. Улучшенный пользовательский интерфейс. Опрос может обеспечить более удобный пользовательский интерфейс за счет автоматического обновления данных без необходимости вручную обновлять страницу.

Минусы👎

1. Использование пропускной способности сети. Опрос может потреблять пропускную способность сети, особенно если интервал опроса слишком частый.
2. Нагрузка на сервер. Опрос может увеличить нагрузку на сервер, особенно если интервал опроса слишком частый или если одновременно опрашивается много клиентов.
3. Задержка. Опрос приводит к задержке, поскольку клиенту приходится ждать следующего интервала опроса, чтобы получить последние данные.
4. Неэффективные обновления. Опрос может привести к неэффективным обновлениям, поскольку клиент может повторно получать одни и те же данные, даже если они не изменились.
5. Разряд батареи. Опрос может потреблять энергию батареи мобильных устройств, так как при этом сетевое соединение остается открытым и активным.

В целом, опрос может быть полезным методом в определенных ситуациях, но важно использовать его разумно, чтобы избежать его недостатков. Особое внимание следует уделить интервалу опроса, количеству извлекаемых данных и нагрузке на сервер. Во многих случаях более эффективные и масштабируемые методы связи в реальном времени, такие как WebSockets или Server-Sent Events, могут быть лучшим выбором.

Если вам понравилась эта статья, не стесняйтесь нажимать кнопку 👏 столько раз, сколько хотите, это подтолкнет меня к написанию других статей :)

Ссылки 🔗