Какво е RxJS?

RxJS е библиотека с реактивни разширения за JavaScript, която става много популярна.

Според Wikipedia, реактивното програмиране е декларативна програмна парадигма, занимаваща се с потоци от данни и разпространение на промяна.

Ще разгледам някои основи, преди да продължа:

  • Наблюдаемо: представлява идеята за извикаема колекция от бъдещи стойности или събития.
  • Observer: е колекция от обратни извиквания, която знае как да слуша стойностите, доставени от Observable.
  • Абонамент: представлява изпълнението на Observable, основно е полезно за отмяна на изпълнението.

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

Можете да използвате основно всяка UI Framework или библиотека там, дори с vanilla JS. В тази статия ще използвам SolidJS (може да го намерите много подобен на React)

npx degit solidjs/templates/ts my-app

Това ще генерира ново приложение Solid с TypeScript, след това просто добавете библиотеката RxJS

yarn add rxjs
yarn dev

Магазин за настройка

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

Абонаменти

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

След това ще subscribe към него

След това ще създадем метод init за инициализиране на състоянието

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

Добавяне, изтриване и промяна на състоянието

Няма какво много да кажем за това, точно като всеки друг пример със списък със задачи, имаме нужда от множество методи за промяна на състоянието, което държи задачите

Това е пълна версия на нашето приложение, можете да добавите още методи, ако искате да изпълните желанието си. Крайният продукт може да изглежда така, в зависимост от вашия стил:

Надяваме се, че този урок може да ви помогне да разберете основите на RxJS и неговото използване. Можете да намерите изходния код тук

Препратки:

Последни думи

Въпреки че моето съдържание е безплатно за всички, но ако намирате тази статия за полезна, можете да ми купите кафе тук