Redux og React-kroge De skal ikke opfattes som det modsatte af hinanden. Det er forskellige ting, med forskellige mål.
Hvornår React Hooks blev født, flere udviklere virkede forvirrede over de introducerede koncepter, og hvordan de vil interpolere ind i Redux bibliotek. Den BrugerEducer hook øgede denne forvirring.
I denne artikel vil jeg forklare, hvordan Redux og den nye React Hook BrugerEducer De er forskellige, og hvordan de kan bruges.
Redux blev oprettet for at administrere tilstand på tværs af applikationen. Det giver flere værktøjer til at mindske kompleksiteten ved håndtering af den globale applikationstilstand.
De nye tilføjelser til Reagere bibliotek, BrugKontekst og BrugerEducer, kom også til at styre tilstanden af en Reagere ansøgning. Det har dog en subtil forskel fra Redux, som jeg vil præcisere yderligere nedenfor.
Men først, lad mig introducere dig til React Hooks.
React Hooks er den nye måde at håndtere tilstand og livscyklus på i React-komponenter, uden at stole på komponentklasser. Det blev introduceret i 16.8-versionen af biblioteket og har til hensigt at mindske kompleksiteten af komponenterne ved at dele logik mellem dem.
React Hooks giver en nem måde at håndtere komponent opførsel og deling komponent logik.
Den React Hooks funktionen har ikke til hensigt at erstatte den tidligere viden om Reagere begreber som livscyklus, stat, rekvisitter, kontekst, og referencer.
Med React Hooks, vi kan skrive vores brugerdefinerede kroge for at udtrække logik, der vil blive brugt i mere end en komponent og implementere D.R.Y (Gentag ikke dig selv) mønster.
I uddraget nedenfor kan du se et eksempel på brugerdefinerede kroge skrevet til et af vores projekter:
Okay, nu hvor vi ved React Hooks, lad os tage et kig på Redux.
Redux er et bibliotek til styring af den globale applikationstilstand. I dette bibliotek kan vi finde flere værktøjer, der hjælper os, udviklere, med at være i kontakt med applikationens tilstand og også transformere den ved at give brugeren mulighed for at udsende handlinger.
Redux, som dokumentationen siger, kan beskrives i tre grundlæggende principper:
butik.butik er ved at udsende handlinger.butik, reduktionsenheden skal skrives som en ren funktion.Redux endda opdateret biblioteket med sin brugerdefinerede kroge. Disse kan bruges til at integrere de komponenter, der bruger React Hooks funktioner til at få adgang til data fra lager- og forsendelseshandlinger uden at stole på komponentklasserne.
Nu hvor vi er lidt mere fortrolige med Redux og React Hooks Lad os se forskellen mellem dem.
Begge håndterer statsstyring, men med flere forskelle. Der er meget abstraktion i den følgende sætning, men dette virker som en gylden regel for at vide, hvornår du skal bruge Redux ind i din ansøgning:
Redux skal bruges i applikationer, der har flere funktioner. Med disse funktioner deler du bidder af de samme oplysninger.
Mens du bruger BrugKontekst og BrugerEducer, den Redux Funktionaliteter kan gengives. Redux tilbyder nogle gratis værktøjer, der hjælper os med at administrere applikationen uden at genopfinde hjulet. Det tilbyder os også følgende:
forbinde () funktion.
Lad os forstå lidt mere om det faktiske Reagere afhængighed, React Hooks, at styre den globale stat og dens ideelle anvendelse.
Den BrugKontekst krog kommer for at få adgang til stat som deles af udbydere. Det bedste scenarie for at bruge React Hooks BrugKontekst er i en lille applikation eller til at dele små stykker information på tværs af komponenterne, som temaet for applikationen. Den BrugKontekst har to hovedbegreber, og de er anført nedenfor.
Denne udbyder opretter tema objekt, der vil blive brugt i alle applikationer og en funktion til at opdatere det, IndstillTema. I uddraget nedenfor kan du kontrollere IndstillTema i aktion.
I uddraget ovenfor kan vi kontrollere brugen af det globale objekt tema for at indstille baggrundsfarven på vores applikation.
Efter at have lært at kende BrugKontekst funktion, der er endnu en, der forvirrer udviklerne. Den BrugerEducer kroge. I afsnittet nedenfor vil jeg gå gennem denne funktionalitet og forklare dens anvendelsestilfælde.
Den BrugerEducer krog skal bruges i komponenter, der har kompleks logik bag sig. Det viser sig som den største forvirring med Redux bibliotek, fordi udviklere har en tendens til at tro det BrugerEducer kunne erstatte statsadministratorbiblioteket. Men faktisk bør brugen begrænses til komponenter. Dette skyldes primært, at den globale anvendelse af BrugerEducer kræver omskrivning af ny kode til funktioner som styring af komponentopdatering.
Nu hvor vi forstår brugssagen for BrugerEducer hook er tid til at vise noget handling. I eksemplet nedenfor bruger vi den nye React Hook afhængighed BrugerEducer til at styre en komponent med forskellige tilstande.
Lad os tage et dybt kig på BrugerEducer input og output parametre.
Erklæringen om BrugerEducer krog vil sandsynligvis se sådan ud:const [tilstand, forsendelse] = userEducer (reducer, INITIAL_STATE);
Hvor vi kan identificere, at BrugerEducer krog modtager to parametre, som vist nedenfor:
Krogens første outputparameter er den faktiske komponenttilstand. Denne tilstand skal bruges i vores applikation til at repræsentere dataene.
Det følger også den samme regel i Reagere stat, det vil sige:
Skriv aldrig direkte til staten, og staten skal opdateres ved at udsende handlinger.
Den handlinger det vil være afsendt af vores komponenter skal altid repræsenteres som et objekt med type og nyttelast nøgle. Hvor type står som identifikator for afsendt handling og nyttelast er det stykke information, at dette handling vil føje til staten.
Ved at tilføje alle disse stykker sammen kan vi se det endelige resultat i applikationen nedenfor:
Redux og React Hooks skal ses som komplementer og også som forskellige ting. Mens med den nye React Hooks tilføjelser, BrugKontekst og BrugerEducer, du kan styre den globale tilstand, i projekter med større kompleksitet, du kan stole på Redux for at hjælpe dig med at administrere applikationsdataene.
Hvis du tænker på opbygning af en applikation, begge kan bruges. Mens Redux indeholder den globale tilstand og handlinger, der kan sendes, React Hooks funktioner til håndtering af den lokale komponenttilstand.
Javascript-udvikler siden 2016 har jeg bygget mobile apps ved hjælp af Ionic og React Native. Guitarist og madlavningselsker.
People who read this post, also found these interesting:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
