Введение

Создание больших веб-приложений может быть непростой задачей, особенно если вам нужно отслеживать много различной информации. Но не волнуйтесь, RxJS здесь, чтобы помочь! Это действительно крутой инструмент, который поможет вам управлять всеми вашими данными в одном месте.

С помощью RxJS вы можете создавать вещи, называемые «потоками данных», которые могут использовать разные части вашего приложения. Это похоже на большую реку, текущую через ваше приложение, сохраняющую все связанным и синхронизированным.

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

Почему RxJS для управления состоянием?

Эй, а вы когда-нибудь путались, когда создавали большое веб-приложение и вам приходилось отслеживать множество различных фрагментов информации? Вот здесь и появляется RxJS! Это действительно крутая библиотека, которая помогает вам управлять всеми вашими данными в одном месте.

С помощью RxJS вы можете создавать потоки данных, которые могут использовать разные части вашего приложения. Это похоже на реку, текущую через ваше приложение, сохраняющую все связанным и синхронизированным.

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

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

Пример списка дел

Самый простой способ применить новую технологию или новое доказательство концепции — составить список дел.

Магазин:

const subject = new Subject();

const initialState: Task[] = [];

let state = initialState;

export const todoStore = {
  init: () => {
    subject.next(state);
  },
  subscribe: (setState: any) => {
    subject.subscribe(setState);
  },
  addTask: (content: string) => {
    const task = {
      content,
      id: uid(),
      isDone: false,
    };
    state = [...state, task];
    subject.next(state);
  },
  removeTask: (id: string) => {
    const tasks = state.filter((task) => task.id !== id);
    state = tasks;
    subject.next(state);
  },
  completeTask: (id: string) => {
    const tasks = state.map((task) => {
      if (task.id === id) {
        task.isDone = !task.isDone;
      }
      return task;
    });
    state = tasks;
    subject.next(state);
  },
  initialState,
};

Этот код определяет простое хранилище для управления списком дел с помощью RxJS. Магазин реализован с использованием субъекта и предоставляет методы для добавления, удаления и выполнения задач.

Функция init инициализирует хранилище, публикуя текущее состояние субъекту с помощью subject.next(state). Эта функция обычно вызывается при первой загрузке приложения, чтобы убедиться, что магазин обновлен.

Функция подписки позволяет компонентам подписываться на изменения в хранилище. Когда хранилище обновляется, функция setState, переданная для подписки, будет вызываться с обновленным состоянием. Эта функция обычно используется компонентами, которым необходимо отображать текущее состояние хранилища.

В целом, init и subscribe — две важные функции в этом коде, которые позволяют разработчикам управлять состоянием списка дел с помощью RxJS.

Использование:

Реализовать такое управление состоянием очень легко, просто сделайте это на самом высоком уровне:

const [tasks, setTasks] = useState([]);

  useEffect(() => {
    todoStore.subscribe(setTasks);
    todoStore.init();
  });

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

Хук useState создает переменную состояния с именем Tasks и функцию с именем setTasks для обновления этого состояния. Аргумент [], переданный в useState, устанавливает начальное значение задач в пустой массив.

Хук useEffect используется для подписки и инициализации todoStore. Строка todoStore.subscribe(setTasks) подписывает функцию setTasks на изменения в хранилище. Это означает, что при каждом обновлении хранилища будет вызываться setTasks с обновленным состоянием, и задачи будут обновляться соответствующим образом.

Функция todoStore.init() инициализирует хранилище, публикуя текущее состояние субъекту с помощью subject.next(state).

Заключение

Итак, это все! Мы научились использовать RxJS и React для создания приложения списка дел. Мы использовали RxJS для управления состоянием приложения и React для отображения текущего состояния пользователю.

Мы увидели, как RxJS предоставляет мощный набор инструментов для управления состоянием, включая наблюдаемые, операторы и субъекты. А еще мы научились использовать перехватчики React, такие как useState и useEffect, для обновления состояния приложения в режиме реального времени.

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

Если вы считаете, что статья слишком непонятна, ознакомьтесь с этим:

• Исходный код: https://github.com/starneit/rxjs-state-poc
• Демо: https://rxjs-poc.web.app/