درک روند RxJS Autorun

عکس پروفایل نویسنده

سلام ، RxJS پخش کننده ها! 🙋♂️

امروز قصد داریم کتابخانه کوچکی را مرور کنیم که عبارتی را بر اساس به روزرسانی در جریانهای مورد استفاده مجدد ارزیابی می کند.

tl؛ dr: اسناد و بسته ها در github.com/kosich/rxjs-autorun 🔗

بیایید با جسارت آن را کشف کنیم!

این یک شمارش معکوس شیرین است

اولین نمونه ما

بگویید ، ما می خواهیم هر مقدار را در یک جریان تایمر زیبا کنیم. بنابراین چنین عبارتی را می نویسیم:

import { timer } from 'rxjs';
import { computed, $ } from 'rxjs-autorun';

// timer would emit every second
const a = timer(0, 1_000);
// expression would concat every emission with a cake
const result = computed(() => $(a) + ' 🍰');
// now we should subscribe to the resulting stream
result.subscribe(x => console.log(x));
// > 0 🍰
// > 1 🍰
// > 2 🍰
// > …

توضیح: compited تابعی را می گیرد که از برخی جریان ها استفاده می کند و هنگام به روزرسانی آن جریان ها ، آن را دوباره ارزیابی می کند. این یک مورد قابل مشاهده را برمی گرداند که می توانید بیشتر دستکاری کنید. و $ (a) نشان می دهد که a جریان است و باید به روزرسانی های آن گوش داده شود.

بنابراین از نظر فنی این عبارت معادل است

a.pipe( map(x => x + '🍰') )

اما بیایید مدام کشف کنیم که این لیب کوچک می تواند چه کار دیگری انجام دهد:

قضیه میمون بی نهایت به بی نهایت موز نیاز دارد

در اینجا ما یک تایمر را ترکیب خواهیم کرد که نشان دهنده یک صف از غذاهای کوچک ما با یک جریان موز برداشته شده است:

import { timer, of } from 'rxjs';
import { delay } from 'rxjs/operators';
import { computed, $ } from 'rxjs-autorun';

const a = timer(0, 1_000); // get some monkeys
const b = of('🍌').pipe(delay(2_000)); // fetch some treats
const result = computed(() => '🐒 #' + $(a) + ' gets ' + $(b)); // mix
result.subscribe(x => console.log(x)); // listen to result stream
// ...2s gap...
// > 🐒 #1 gets 🍌
// > 🐒 #2 gets 🍌
// > 🐒 #3 gets 🍌
// > …

اصلا سخت نیست ، درسته؟

این عبارت شبیه به

combineLatest(a, b).pipe( map(([x,y]) => x + y) )

بیایید یک مثال جریان چندگانه دیگر را مرور کنیم:

چه کسی می تواند مقداری پیتزا بخورد؟

آخرین ترفندی که امروز می خواهیم یاد بگیریم توانایی خواندن آخرین مقادیر بدون پیگیری به روزرسانی های آنها است:

import { Subject } from 'rxjs';
import { computed, $, _ } from 'rxjs-autorun';

const a = new Subject(); // neighbours
const b = new Subject(); // food
computed(() => $(a) + ' likes ' + _(b))
  .subscribe(x => console.log(x));
a.next('🐈'); // nothing: b is still empty
b.next('🥛'); // > 🐈 likes 🥛
a.next('🐭'); // > 🐭 likes 🥛
b.next('🍕'); // nothing: _(b) doesn't trigger re-runs
a.next('🙋‍♂️'); // 🙋‍♂️ likes 🍕

توضیح:

_

تابع نشان می دهد که ما باید یک مقدار را از یک جریان بگیریم ، اما نمی خواهیم هنگام انتشار این جریان خاص ، بیان خود را دوباره محاسبه کنیم. بنابراین اگر عبارتی استفاده می کند

$(a)

و

_(b)

– این فقط به به روز رسانی واکنش نشان می دهد.

این همچنین به این معنی است که عبارت محاسبه شده (() => _ (a)) یک مقدار ساطع می کند و بلافاصله کامل می شود.

خوب ، یکی از آخرین موارد قبل از جمع بندی:

دگرگونی

این بار سعی کنید حدس بزنید چیست؟

import { timer, of } from 'rxjs';
import { computed, $, _ } from 'rxjs-autorun';

const a = timer(0, 1_000);
const b = of('💧');
const c = of('❄');
const result = computed(() => $(a) % 2 ? _(b) : _(c));
result.subscribe(x => console.log(x));

در واقع ، این هوا دمدمی مزاجی است …

در واقع ، این عبارت تا حدودی شبیه به است نقشه سوئیچ

Outro

تمام نمونه هایی که می توانید بصورت آنلاین امتحان کنید.

و کتابخانه چیز دیگری دارد ، خودتان بروید در آن کاوش کنید!

در مقاله های بعدی ، نحوه فیلتر کردن میزان انتشار و نحوه مدیریت اشتراک در عبارات rxjs-autorun را بررسی خواهیم کرد. آن و سایر پست های RxJS را از دست ندهید – من را اینجا و بعد دنبال کنید توییتر!

برای خواندن این مقاله از شما تشکر می کنم! واکنش پذیر باشید و روز خوبی داشته باشید

من می خواهم از fkrasnowski برای بحثهای طولانی درباره این ایده تشکر کنم ، ryansolid برای اینکه امتحانش کردید و یوهان برای همکاری در این زمینه با من! 🙏

Psst .. برای مطالعه به چیز دیگری احتیاج دارید؟

من شما را تحت پوشش قرار دادم:

به امید دیدار!

همچنین در https://dev.to/rxjs/rxjs-autorun-cop

برچسب ها

با هکر نون همراه باشید

حساب رایگان خود را ایجاد کنید تا قفل تجربه خواندن سفارشی خود را باز کنید.