En af de mest væsentlige dele af enhver app er statsledelse. Det dikterer, hvad brugerne ser, hvordan appen ser ud, hvilke data der gemmes osv. Derfor er det ingen overraskelse, at der er så mange open source-værktøjer dedikeret til at gøre statsstyring lettere og mere brugervenlig.
Af de mange JavaScript UI-rammer, React er måske den, der nyder det mest dynamiske økosystem, herunder statsstyringsbiblioteker. Denne artikel dækker to af disse biblioteker - Recoil vs Redux - og vise, hvordan de begge adskiller sig fra hinanden, og deres forskellige tilgange til applikationsudvikling.
Mens Redux betragtes som den mest populære statsforvaltningsbibliotek, Recoil er Facebooks eksperiment React state management framework, der på det seneste har fået stor opmærksomhed. Lad os tage et kig på hvad Recoil vs Redux er, deres præstation, og om det er en god ide at bruge den ene over den anden.
EN tilstandsstyringsbibliotek giver dig en bekvem måde at modellere tilstanden af din applikation, udlede beregnede værdier fra det, og overvåg det for ændringer.
Kort sagt, styring af dine data i frontend-rammer er lige så vigtig som databaser. At have et statsstyringssystem der administrerer dine data godt, hjælper dig med at undgå en række API-opkald.
Uden statsstyring spredes data overalt, som du kan se på nedenstående billede. Du kan faktisk ikke have en enkelt kilde til sandhed til dine data, fordi denne type struktur er svær at vedligeholde og bremser din udviklingsproces.
Når du har en Statsstyringssystem på plads, data flyder i en retning, fra din app til staten og omvendt. Du er opmærksom på den faktiske placering af dine data. Disse tilstandsstyringsteknologier giver også et øjebliksbillede af det fulde datasæt på et bestemt tidspunkt. På denne måde ved du præcis, hvor dine data er, hvilke fremskynder udviklingen.
Alt i alt gør administration af dine data godt din applikation mere effektiv.
Rekyl js er et nyt statsstyringsbibliotek til React. Det er „minimalt og reaktisk“, som hjemmesiden siger, og i praksis ligner det meget at bruge de normale brugstilstandskroge, men med et par pænere små detaljer, der gør det lettere at forstå hvordan dataene flyder gennem din applikation.
Redux er et open source-bibliotek i JavaScript-verdenen, og meget populært inden for domænet React og React Native. Det er en slags obligatorisk go-to-værktøj for enhver React-udvikler, derfor går forståelsen af begreberne React og Redux hånd i hånd.
Det implementerer også Flux, den foreslåede „arkitektur“ til at håndtere tilstand på en React-applikation.
Redux giver en centraliseret butik til din applikationstilstand og logik. Det giver komponenter direkte adgang til de data, de har brug for, og er en forudsigelig tilstandsbeholder designet til at hjælpe dig med at skrive JavaScript-apps, der opfører sig konsekvent på tværs af klient-server og oprindelige miljøer.
Redux giver dig mulighed for gøre det nemmere at opbygge komplekse applikationer ved at give konsistens i dataene på tværs af applikationen. Efterhånden som applikationen vokser, bliver det udfordrende at administrere dataene med komponenttilstanden.
Men for at bruge Redux behøver du ikke oprette en React-app - du kan bruge Redux med enhver UI-ramme eller bibliotek til styring af app-tilstanden. Redux har et stort økosystem af tilføjelser, der passer til dine behov.
Desuden kan du spore hvornår, hvor, hvorfor og hvordan din applikationstilstand ændres ved at bruge Redux Devtools.
Redux har været det valgte bibliotek i lang tid, men med lanceringen af rekyl, vi har nu også et React-specifikt bibliotek, der let blandes med Reacts nyeste funktioner.
Lad os se, hvad hvornår giver det mening at bruge Recoil og Redux, deres tilstandstilgange, ydeevne, API-forskelle og både udvikler- og brugeroplevelse.
I modsætning til Recoil anvender Redux mange flere udtryk:
handlinger - det sender en besked til Redux og kan indeholde data; en handling er en begivenhed, der definerer noget, der skete i applikationen; den har en type felt på et JavaScript-objekt.
reduceringsmidler - en hændelseslytter, der håndterer begivenheder baseret på den modtagne handling; modtager den aktuelle stat og en handlingobjekt; det kan opdatere tilstanden, hvis det er nødvendigt ((tilstand, handling) => (nystat)).
butik - det er her, Redux applikationstilstanden lever; der kræves en vis planlægning for at „designe“ butikken for at sikre, at opdateringer udføres på det mindste sæt data, fordi opdateringer til butikken vil udløse opdateringer i brugergrænsefladen.
Et ret almindeligt scenario er ved et uheld at sende en opdatering til butikken med et sæt værdier, hvor kun en af værdierne adskiller sig fra dem, der findes i butikken. De vil bestille komponenter til gengivelse for alle de modtagne, men kun en værdi blev virkelig opdateret. Ikke desto mindre bruger vi computerressourcer til at fortælle komponenter om at opdatere, hvilket ikke var nødvendigt på grund af det dårlige design af butikken/reduktionen/handlingen.
forsendelse - giver dig mulighed for at opdatere staten ved at ringe butik.forsendelse (); det sender handlinger, dvs. de udløser en begivenhed.
selektorer- udtrækker specifikke oplysninger fra en butik; det undgår gentagelse af logik.
Lad os se på eksemplet nedenfor:
Bare definitioner til kortlægning af handlinger med reduceringsoperationer.
constants.js
Definerer, hvordan appens tilstand ændres i henhold til de modtagne handlinger. Dette eksempel har to skiver, en til Brugerdata og en anden til Indkøbskurv. Handlingen for vellykket login registrerer brugerens data i staten. Ved vellykket logout rydder vi brugerens data og indkøbskurv.
reducers.js
Definition af de handlinger, der vil udløse tilstandsændringer. De kan modtage en nyttelast for at introducere nye data i staten. Vi har en handling, der skal kaldes efter et vellykket login og en anden for den vellykkede logout.
actions.js
selectors.js
Har kun et par begreber, der er ligetil:
atom - et stykke tilstand; hvert atom er som en mini-butik på sig selv, og det bliver sværere at falde ind i det tidligere scenarie af Redux, da atomer er fuldstændigt afkoblet og sigter mod at holde data, der opdateres på én gang.
vælgeren - basen, hvor et stykke stat beregnes.
Eksempel nedenfor:
state.js
component.js
createSlice () ved siden af KonfigurerRestore (), som kommer med handlinger og reduktionsmidler;BrugtDispatch og BrugSelector kroge til at sende handlinger og gøre brug af selektorer.
atom (), som også leveres med en vælger og indbyggede handlinger, der kan sendes.
Redux er god til håndhævelse af bedste praksis for udviklere, giver dig et simpelt mønster at følge, så du ikke behøver at tage for mange implementeringsbeslutninger, når du bygger funktioner ud. Det giver dig også mulighed for abstraktere dine API-anmodninger til handlinger så alt holdes ét sted.
Recoil siges at være ret nem at bruge. Det giver dig for eksempel mulighed for at foretage asynkrone anmodninger i vælgere for at komme i gang med tilstanden fra en API-anmodning.
Hvis du ønsker at administrere indlæsning og fejltilstande, har du muligvis brug for brugerdefineret implementering. Det er god praksis at holde styr på en global Er indlæsning variabel i reduktionsenheden.
Da Recoil integreres med Reacts nyeste tilstand, giver det dig mulighed for at håndtere indlæsningstilstande med Spænding og fejl med en FejlBoundary, så du kan opbygge din applikation på en mere deklarativ måde.
state.js
component.js
Redux er blevet etableret som førende inden for global statsstyring i et stykke tid, og det går bestemt ikke nogen steder snart. Imidlertid, Recoil er ved at blive en seriøs udfordrer til blanding med React.
En stor fordel ved at bruge Recoil er dens integration med React's Suspense, som tillader en ligetil måde at håndtere asynkrone opgaver på og registrere deres tilstand, hvilket gør det muligt for dig opsæt hurtigt indlæsningsskærme uden at kræve så meget logikkode for at kontrollere, at applikationen indlæser data fra serveren.
Selv om Redux er den bedste løsning til større projekter og den bedste til en produktionsapplikationDet er rimeligt at sige det Recoil kan være et bedre valg, når det kommer til både udvikleroplevelse og brugeroplevelse. Recoil er stadig i et eksperimentelt stadium, men det kan give ydeevnefordele, hvis din app er kompleks nok.
Mere end 500.000 mennesker læser vores blog hvert år, og vi er rangeret øverst på Google for emner som React, Recoil og Redux. Hvis du kunne lide dette blogindlæg og ville elske at læse alle vores blogindlæg, tag et kig her.
Læs også:
Alsidig og datadrevet vækstmarkedsfører med dybdegående forretningskendskab, opdateret med den seneste udvikling i det digitale marketinglandskab.
Din daglige webudvikler, der kan lide at gemme sig i backend. Javascript og Ruby er min marmelade. Jeg fumler stadig med Docker, og mine bygninger går i stykker ret ofte.
Full-stack udvikler og JavaScript-elsker. Top notch front-end er min ting, hvor jeg kan lide at eksperimentere med nye ting. Kajakfisker, brygger og øldrikker!
People who read this post, also found these interesting:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
