Что такое 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 и его использование. Вы можете найти исходный код здесь
Использованная литература:
- https://rxjs.dev/
- https://tweetlet.net/code
- https://en.wikipedia.org/wiki/Reactive_programming
- https://blog.logrocket.com/rxjs-react-hooks-for-state-management/
Последние слова
Хотя мой контент бесплатен для всех, но если вы найдете эту статью полезной, вы можете купить мне кофе здесь