⚡ Kako nikada više ne ponoviti iste greške RxJ-a⚡

Zapamtite: .pipe () nije .subscribe ()!

Ovaj je članak namijenjen početnicima koji pokušavaju povećati svoje znanje o RxJ-ima, ali također može biti brzo osvježavanje ili referenca za početnike koji trebaju pokazati iskusnijim programerima!

Danas ćemo to držati kratko i pravo na stvar!

Trenutno radim u prilično velikoj organizaciji, u nekoliko timova i projekata (više od 40 SPA-a) koji su u procesu migracije na Angular, a time i RxJ-ove.

Ovo predstavlja izvrsnu priliku za kontakt s zbunjujućim dijelovima RxJ-ova koje je lako zaboraviti kada se ovlada API-ima i umjesto toga usredotoči na implementaciju značajki.

Funkcija ".subscribe ()"

RxJ uočljivi predstavljaju "recept" onoga što želimo da se dogodi. Deklarativno je, što znači da su sve operacije i transformacije od početka pokrenute u cjelini.

Primjer vidljive struje mogao bi izgledati otprilike ovako ...

Ovaj vidljivi tok RxJ-a sam po sebi neće učiniti doslovno ništa. Da bismo ga izvršili, moramo se pretplatiti na njega negdje u našoj bazi kodova!

U gornjem primjeru dali smo rukovatelj samo za vrijednosti koje emitira opažljivo. Sama funkcija pretplate prihvaća do tri različita argumenta za obradu sljedeće vrijednosti, pogreške ili potpunog događaja.

Osim toga, mogli bismo dodati i objekt sa gore navedenim svojstvima. Takav je objekt implementacija Observersučelja. Prednost promatrača je u tome što ne moramo osigurati implementaciju ili barem nullrezervirano mjesto za voditelje koji nas ne zanimaju.

Razmotrite sljedeći primjer ...

U gornjem kodu prosljeđujemo objektni literal koji sadrži samo cjelovit rukovatelj, normalne vrijednosti će se zanemariti, a pogreške će stvoriti balon.

I u ovom primjeru prenosimo obrađivač sljedeće pogreške i dovršavamo je kao izravne argumente funkcije pretplata. Svi neprimjenjeni obrađivači moraju se prosljeđivati ​​kao nula ili nedefinirani dok ne dođemo do argumenta koji nas zanima.

Kao što vidimo, stil umetnutog argumenta implementacije .subscribe()poziva funkcije je pozicijski.

Prema mom iskustvu, stil umetnutih argumenata najčešći je u raznim projektima i organizacijama.

Nažalost, često se možemo susresti s implementacijom poput sljedeće ...

Gornji primjer sadrži suvišne rukovatelje i za one nexti za one errorkoji ne rade točno ništa i mogli bi biti zamijenjeni null.

Još bi bilo bolje proslijediti objekt promatrača s completeimplementacijom rukovatelja, izostavljajući ostale obrađivače!

".Pipe ()" i operatori

Kako su početnici navikli pružati tri argumenta za pretplatu, često pokušavaju implementirati sličan obrazac kada koriste slične operatore u cijevnom lancu.

RxJs operatori, koje se često brkaju s rukovaocima .subscribe(), jesu catchErrori finalize. Oboje također imaju sličnu svrhu - jedina razlika je u tome što se koriste u kontekstu cijevi umjesto pretplate.

U slučaju da bismo željeli reagirati na kompletan događaj svake pretplate na RxJs uočljivi tok, mogli bismo implementirati finalizeoperator kao dio samog promatranog toka.

Na taj način ne moramo ovisiti o programerima da bismo implementirali cjelovite obrađivače u svaki pojedini poziv .subscribe (). Imajte na umu da se na uočljivi tok možete pretplatiti više puta!

To nas dovodi do konačnog i vjerojatno najproblematičnijeg obrasca s kojim se možemo susresti prilikom istraživanja različitih baza koda: suvišni operatori dodani kada pokušavaju slijediti obrazac .subscribe () u kontekstu .pipe ().

Također, mogli bismo se susresti s još više detaljnim rođakom ...

Primijetite da smo prešli iz izvornog jednog retka u punih devet redaka koda koji moramo pročitati i razumjeti kada želimo ispraviti grešku ili dodati novu značajku.

Stvari mogu postati još složenije u kombinaciji s složenijim generičkim vrstama Typescripta, što cijeli blok koda može učiniti još tajnovitijim (a time i gubiti više našeg vremena).

Rekapitulacija

  1. .subscribe()Metoda prihvaća oba promatrača objekt i inline rukuju.
  2. Objekt promatrača predstavlja najsvestraniji i najsažetiji način pretplate na uočljivi tok.
  3. U slučaju da želimo ići s inline pretplatiti argumenata ( next, error, complete) možemo pružiti nullumjesto rukovatelj mi ne trebaju.
  4. Morali bismo se pobrinuti da ne pokušavamo ponoviti .subscribe()obrazac kada radimo s .pipe()operaterima.
  5. Uvijek se trudite da kod bude što jednostavniji i uklonite nepotrebne viškove!

To je to! ✨

Nadam se da vam se svidio ovaj članak i da ćete sada bolje razumjeti kako se pretplatiti na RxJ-ove vidljive uz čistu i sažetu implementaciju!

Molimo vas da ovaj vodič podržite svojim ??? pomoću gumba za pljeskanje i pomoći mu da se proširi na širu publiku? Također, ne ustručavajte se pingati ako imate bilo kakvih pitanja koristeći odgovore na članak ili Twitter DMs @tomastrajan.

I nikad ne zaboravite, budućnost je sjajna Pokretanje projekta Angular? Pogledajte kutni NgRx materijal za pokretanje!

Ako ste stigli tako daleko, slobodno pogledajte neke od mojih ostalih članaka o Angularnom i frontend razvoju softvera općenito ...

? ‍? ️ 7 profesionalnih savjeta za produktivnost s kutnim CLI-om i shemama?

G ular sheme je tijek rada alata za moderni web - službeni uvod articlehac kernoon.com   najbolji način za otkazivanje pretplate RxJS uočiti u Kutna Aplikacije!

Postoji mnogo različitih načina kako postupati s pretplatama na RxJS u Angular aplikacijama, a mi ćemo istražiti njihov ... blog.angularindepth.com Ukupni vodič za ubrizgavanje ovisnosti o kutu 6+ - providedIn vs pružatelji usluga: []?

L et je naučiti kada i kako koristiti nove bolje kutni 6+ ovisnost ubrizgavanja mehanizam s novim providedIn sintaksom kako bi ... m edium.com Ultimate Odgovor na vrlo čest Kutna pitanje: pretplati () vs | asinkronska cijev

Većina popularnih knjižnica upravljanja kutnim državama, poput NgRx, izlaže stanje aplikacije u obliku strujanja ... blog.angularindepth.com