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