Hvordan bruke Reaktor-Redux-pakken

React er et JavaScript-bibliotek for å bygge brukergrensesnitt som har tatt webutviklingsverdenen med storm. Men i et fellesskap som favoriserer valg og fleksibilitet, kan det være vanskelig å vite hvor du skal begynne! 

Ikke bekymre deg - noen mønstre og moduler har dukket opp som beste praksis. En av disse er Redux for å administrere applikasjonsstatus.

I denne videoen fra kurset mitt på Modern Web Apps With React og Redux, viser jeg deg hvordan du bruker reagere Redux- pakke.

Det er en god praksis i Redux-applikasjoner å skille mellom presentasjonskomponenter og containerkomponenter. I denne videoen forklarer jeg hva disse er og hvordan vi kan bruke dem.

Jeg refererer til kode vi allerede har opprettet i tidligere deler av kurset, men du bør kunne følge med og se hva jeg gjør. Du kan finne full kildekode for kurset på GitHub. 

Slik bruker du reagere Redux- Pakke

Hvorfor bruk reagere Redux-?

I tidligere deler av dette kurset bygde vi en prøveapp ved hjelp av React og Redux. Imidlertid må nesten alle komponentene våre jobbe med butikken, enten ved å lese bestemte stater eller ved å sende handlinger tilbake til butikken. Husk at Redux-butikken inneholder hele staten for hele programmet. Dette betyr at de fleste, om ikke alle, av komponentene våre må kunne få tilgang til butikken på en eller annen måte.

Så langt har vi et globalt butikkobjekt som vi kan få tilgang til direkte i delen der vi tilordner egenskaper til sidelinjen. 

Men å ha en global butikk som dette er ikke bra av mange grunner. En av de enkleste årsakene er at den egentlig ikke er global - den er bare tilgjengelig fra denne filen. Det betyr at vi må bruke den fra denne filen, eller vi må begynne å sende den fra denne filen til andre filer, noe som vil bli veldig rotete. 

Også hvis vi har mange nestede komponenter, betyr det at hvis en mellomkomponent ikke egentlig trenger butikken, men en av barna gjør det, må vi overføre den til den mellomliggende komponenten, uansett fordi den trenger det slik at det kan passere det til barnet sitt.

Nå ville det være fint om det var noen måte vi kunne gi alle våre komponenter tilgang til butikken uten å ha en global variabel, og uten å passere den manuelt. 

Og sannheten er at det er en måte. Vi kan bruke en pakke som heter reagere Redux-. Du kan lese litt mer om ideene bak denne pakken hvis du går over til Redux-dokumentasjonen.

Hvordan reagere Redux- Virker

En av hovedidéene bak denne pakken er ideen om presentasjonskomponenter og containerkomponenter. I utgangspunktet kan vi ødelegge applikasjonen vår i to sett med komponenter. 

Det første settet er presentasjonsdelene. Disse er opptatt av hvordan ting ser ut. De trenger ikke å være klar over Redux i det hele tatt. De leser bare data fra deres egenskaper, og de kan endre data ved å påkalle tilbakeringinger som vi også tilordner som egenskaper. 

Beholdere, derimot, er klar over Redux, og de abonnerer spesifikt på Redux-tilstanden og sender Redux-handlinger. Vi kan lage en containerkomponent ved å enkelt pakke inn en presentasjonsdel med noen av disse instruksjonene. 

Et praktisk eksempel: Splitting Sidebar Komponenter

La oss nå dykke inn og se hvordan dette kan fungere. Vi skal bruke sidebjørnet som et eksempel på en komponent som vi kan dele opp i presentasjons- og containerkomponenter.

Nå kan du være litt forvirret her hvordan vi skal dele vår sidefelt i to separate komponenter. Men sannheten er at beholderkomponenter alltid skal pakke presentasjonskomponenter. Faktisk kan du ofte ha en presentasjonell komponent som kun har en jobb, og den skal pakkes inn av en bestemt beholderkomponent. Det er akkurat det vi skal gjøre med sidebjelken. 

Installere reagere Redux-

Selvfølgelig må vi starte med å installere reaktor-redux-biblioteket. Så la oss gjøre npm installere - lagre reaksjonsredusering. 

Når det er installert, kan vi fortsette og importere det ved hjelp av importer Provider fra 'react-redux'; i vår hovedfil, app.js. I denne filen trenger vi faktisk bare leverandørkomponenten gitt til oss ved å reagere-redux.

Nå er leverandørkomponenten faktisk den delen av reagere-redux som skal ta vare på vår butikk og sende den rundt til disse forskjellige komponentene. Egentlig hva som skjer er, bak kulissene, leverandøren bruker kontekstfunksjonen til React. Så hvis du har litt mer avansert React-opplevelse, og du har spilt rundt med sammenhengen før, kan det gi deg et innblikk i hvordan nettopp leverandøren jobber.

Leverandøren gjør det egentlig, veldig enkelt å bruke butikken overalt. Alt vi trenger å gjøre er å pakke vår applikasjonskomponent på toppnivå i en leverandørkomponent, som vist her:

Og nå bruker applikasjonen vår reaktor-redux-leverandøren. 

Bruke koble() Funksjon

La oss nå åpne sidebarfilen vår, og la oss importere koble() funksjon fra reagere Redux-. De koble() funksjonen tillater oss å definere nøyaktig hvilke egenskaper og funksjoner vi vil ha en containerkomponent å ha, og så kan vi ta den definisjonen, bruke den på en presentasjonskomponent og få en komplett React-komponent.

Nå forstår jeg det som høres litt forvirrende ut. Så la oss se hvordan dette er gjort. 

Den presentasjonelle komponenten

Skjønnheten i sidebjelken som vi allerede har skrevet er at den faktisk er allerede en presentasjonell komponent.

Først og fremst er vårt sidebar bare opptatt av hvordan ting ser ut. Det gir oss selvfølgelig oppfølgingsdesign, og det er ikke kjent med Redux i det hele tatt. Vi har disse metodene vi kaller showAddDeck, addDeck, og hideAddDeck, men disse metodene vet om Redux. Sidebaret vet ingenting om Redux. Faktisk, hvis vi ønsket å ta Redux ut av dette prosjektet og bruke noe alternativ, kan vi bare endre definisjonene av disse funksjonene, og denne sidebar-komponenten trenger ikke å endres i det hele tatt. Det ringer bare disse funksjonene. 

Hvordan leser det data? Vel, det bare leser data fra egenskaper som vi har gitt den. Hva med å endre data? Vel, det påkaller bare tilbakeringinger som er fra egenskaper. Vi har tre metoder, og når den påberoper dem, blir dataene endret i butikken. Og til slutt, selvfølgelig, ja, det er skrevet for hånd. Og som du vil se om et sekund, vil beholderkomponenter bli generert av reaktor-reduks.

Så vi har allerede en av de to delene vi trenger: dette sidebaret er en presentasjonsdel. Den neste tingen vi vil gjøre er å ta disse definisjonene av eiendommen som vi gir til sidelinjen, og i stedet for å definere dem her, definerer vi dem som en del av vår containerkomponent.

Så jeg skal bare kopiere disse linjene:

Og jeg kommer til å lime dem øverst her:

Opprett kartleggingsfunksjoner

Nå er disse egenskapene pent delt inn i to sett: egenskapene som er data, og egenskapene som er funksjoner for å ringe, som utfører handlinger som forandrer butikken.

Så hva vi trenger å gjøre nå, er å lage to funksjoner som vil kartlegge staten til disse egenskapene. Tradisjonelt innenfor React kalles disse funksjonene mapStateToProps og mapDispatchToProps. 

Så la oss gå videre og begynne med mapStateToProps. Dette er en funksjon som vil motta den nyeste staten fra butikken.

Vi trenger bare å returnere et objekt, som skal ha to egenskaper, og som vi allerede så, er de dekk og addingDeck eiendommer. Så jeg kan faktisk bare kopiere og lime dem inn her fordi dette er praktisk talt de samme dataene - vi trenger bare å konvertere syntaksen til å være objektstavlig syntaks i stedet for JSX-syntaks.

Så dette er vårt mapStateToProps funksjon. I utgangspunktet tar det bare den nåværende tilstanden fra butikken, og den returnerer hva data eller presentasjonskomponent trenger. Så det trenger dekk og addingDeck eiendom, og så returnerer vi dem innenfor et objekt.

Rengjør koden

Vi kan gjøre noen ting for å rydde opp dette litt. Først og fremst kunne vi faktisk bli kvitt disse krøllete braces som er blokken for denne funksjonen fordi vi bare har en uttalelse om at vi kommer tilbake. Men da, fordi vi bare har den ene linjen, kan vi kvitte seg med avkastningserklæringen.

Men nå har vi krøllete braces rundt objektet bokstavelig, og JavaScript kommer til å tro at dette er en funksjonsblokk, så vi vil pakke inn de i parentes. 

Vi kan forkorte dette litt mer, fordi vi ikke trenger hele statens objekt, så vi kan bare bruke destruktureringssyntaxen og si at vi bare vil ha dekk eiendom og addingDeck eiendom fra dette objektet.

Selvfølgelig, da, inne i denne funksjonen, sier vi ikke state.decks, vi sier bare dekk. Og vi sier ikke state.addingDeck, vi sier bare addingDeck. Og nå tror jeg at du kan se hvor vi skal med dette - fordi nøkkelen og eiendommen har samme navn, vi kan bli kvitt en av dem, og vi kan bare si dekk og addingDeck.

Og dette er den kortere versjonen av vår funksjon takket være ES6. 

Så nå, hva med mapDispatchToProps? Vel, dette er også en funksjon, og det kommer til å ta utsendelse som den eneste parameteren. Nå sendes selvfølgelig butikkens forsendelsesfunksjon. 

Igjen, vi skal bare returnere et objekt bokstavelig, så ikke glem de parentesene, og inne trenger vi de tre egenskapene vi har oppe på toppen: addDeck, showAddDeck, og hideAddDeck. Så nå har vi en funksjon som kartlegger forsendelsesfunksjonen til de tre tilbakekallingene vi trenger for et sidebar.

Så nå har vi alt vi trenger for å lage vår containerkomponent. Vi har to funksjoner som vil kartlegge vårt statsobjekt i vår forsendelsesfunksjon til egenskapene som denne funksjonen trenger. Og vi har en presentasjonell komponent som forventer disse egenskapene. 

Nå, den koble() funksjon er det vi kan bruke for å koble disse to kartleggingsfunksjonene med en presentasjonsdel. Og hva denne koblingsfunksjonen kommer tilbake er vår containerkomponent. Vi kommer faktisk ikke til å skrive en annen komponent her - i stedet sender vi disse tre stykkene til koble() funksjon, og det kommer til å returnere vår containerkomponent.

Så nede i bunnen, i stedet for å eksportere sidebar, la vi eksportere et anrop til koble(). Vi skal passere det to parametre-the mapStateToProps og mapDispatchToProps funksjoner og- koble() vil returnere en ny funksjon.

eksporter standardkobling (mapStateToProps, mapDispatchToProps) (Sidebar);

Nå er det som faktisk eksporteres fra denne filen, ikke en presentatorisk sidebar, men i stedet er det vår nye containerkomponent, som utenfor denne funksjonen vi fortsatt kan referere til som .

Så det er det reagere Redux- pakke i aksjon. Du kan sjekke kurskildens filer på GitHub for å se hvordan koden fungerer fullt ut.

Se hele kurset

I hele kurset, Moderne Web Apps With React og Redux, vil jeg vise deg hvordan du kommer i gang med å bygge moderne webapps med React og Redux. 

Med utgangspunkt i ingenting, bruker du disse to bibliotekene til å bygge et komplett webprogram. Du starter med den enkleste mulige arkitekturen og bygger sakte opp appen, funksjonen etter funksjonen. Du lærer om grunnleggende begreper som verktøy, reduksjonsverktøy og ruting. Du vil også lære om noen mer avanserte teknikker som smarte og dumme komponenter, rene komponenter og asynkrone handlinger. På slutten har du opprettet en komplett flashcards-app for læring med avstandsrepetisjon.

Underveis får du sjansen til å skjerpe dine ES6 (ECMAScript 2015) ferdigheter og lære mønstrene og modulene som fungerer best med React og Redux!

Du kan også bygge på din kunnskap om React med disse kursene:

• Reag Deep Dive: Bygg en React App med Webpack
• Bygg en Microblogging App med Flux og React
• Bygg en Wiki med React og Firebase
• Unit Testing React Components
• Tenk i React: Funksjonelle komponenter