Что такое RxJS?

RxJS — это библиотека реактивных расширений для JavaScript, которая становится очень популярной.

Согласно Википедии, реактивное программирование — это парадигма декларативного программирования, связанная с потоками данных и распространением изменений.

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

  • Observable: представляет собой вызываемую коллекцию будущих значений или событий.
  • Observer: набор обратных вызовов, который знает, как прослушивать значения, предоставленные Observable.
  • Подписка: представляет выполнение Observable, в первую очередь полезно для отмены выполнения.

Настройка проекта

Вы можете использовать практически любую инфраструктуру пользовательского интерфейса или библиотеку, даже с ванильным JS. В этой статье я буду использовать SolidJS (вы можете найти его очень похожим на React).

npx degit solidjs/templates/ts my-app

Это создаст новое приложение Solid с TypeScript, затем просто добавьте библиотеку RxJS.

yarn add rxjs
yarn dev

Магазин установки

В папке src давайте создадим файл state.ts (вы можете назвать его store или как-то еще), затем создайте initialState и subject

Подписки

Субъект RxJS — это единственный способ многоадресной передачи значения или события нескольким наблюдателям. В этом примере мы подпишем наши различные функции setter на нашу тему RxJS, чтобы, когда она получает какие-либо данные, она пересылала эти данные в каждое состояние, связанное с нашей функцией setter (если вы знакомы с React, просто передайте setState в это )

Тогда мы будем subscribe к этому

Далее мы создадим метод init для инициализации состояния

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

Добавить, удалить и изменить состояние

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

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

Надеюсь, что это руководство поможет вам понять основы RxJS и его использование. Вы можете найти исходный код здесь

Использованная литература:

Последние слова

Хотя мой контент бесплатен для всех, но если вы найдете эту статью полезной, вы можете купить мне кофе здесь