Leder du efter noget, der hjælper dig med at skrive mobile applikationer i React Native, der opfører sig konsekvent, kører i forskellige miljøer og tester let? Der er en løsning, og du har lige fundet den!
Du er helt sikkert stødt på det faktum, at når din applikation bliver større og mere kompleks, er det svært at administrere tilstande og videregive data fra en komponent til en anden komponent (eller underordnede komponenter). Der er præcis, hvor redux kan hjælpe dig: det giver global adgang til tilstand eller data, som kan bruges i enhver komponent uden at afhænge af andre komponenter.
Artiklen er en begynderomfattende beskrivelse af, hvordan man bruger redux og redux toolkit i et React Native-program. Denne guide forudsætter, at du kender det grundlæggende i React Native, men hvis dette også er nyt for dig, har vi dækket dig med vores React Native vejledning. Vi bruger også en Android-emulator i denne vejledning, noget, der giver dig mulighed for at simulere en Android-enhed på din computer, så du kan teste din applikation på en række forskellige enheder og Android API-niveauer uden at skulle have hver fysisk enhed. Bemærk, at denne emulator giver næsten alle funktionerne i en rigtig Android-enhed.
Endelig, for at hjælpe dig med at lære det grundlæggende i redux, leverer vi undervejs kodeeksempler på en simpel tællerapplikation. Det vil se sådan ud:
Her er koden til vores SimpleCounter-komponent:
Lige nu er denne kode statisk, og vi har ikke erklæret nogen tilstand inde i komponenten. Du er velkommen til at følge kodeeksemplerne, når vi integrerer redux i vores react native app. Vores React Native tutorial (link ovenfor) viser dig, hvordan du opretter et React Native-miljø, derefter skal du sørge for at installere redux- og react-redux-bibliotekerne. For at gøre det skal du blot bruge kommandoen:
Hvis du bruger npm 5.0.0 eller superior, skriv dette i stedet:
Redux er et javascript-bibliotek lavet til at hjælpe dig med at administrere tilstanden af din applikation. Det gør det ved at give udvikleren et centraliseret sted kaldet butikken, hvor staten gemmes og ændres gennem handlinger og reduktionsmidler. Dette centraliserede sted giver dig mulighed for at dele tilstanden mellem flere skærme og vide nøjagtigt, hvor og hvordan tilstanden ændres. Dette er især nyttigt i voksende applikationer, der er for store til, at udviklerne har fuldt kendskab til datastrømmene og følgelig bliver fejlprome.
Som nævnt ovenfor bruger redux en kombination af handlinger, reduktionsmidler og butikken til at styre applikationstilstanden. For at forstå og lære redux skal du vide, hvordan disse abstraktioner fungerer. Lad os starte!
Meget let er applikationstilstanden alle de oplysninger, som applikationen bruger og/eller ændrer. At have en centraliseret tilstand og en forudsigelig måde at ændre den på kan gøre det muligt for applikationer at være sammenhængende med de oplysninger, de viser brugerne. Dette er især nyttigt for store enkeltsideapplikationer.
Handlinger og reduktionsmidler ændrer tilsammen tilstanden. Netop handlinger bestemmer, hvad der ændres, og hvor. Reduktorer angiver, hvordan det ændres. Ved at analysere layoutet i begyndelsen af blogindlægget har vi brug for tre handlinger: INCREMENT, DECREMENT og CHANGE_BY_AMOUNT. Handlinger er objekter med en type og en nyttelastattribut. Typen er handlingens identifikator, og nyttelasten er alle de oplysninger, som reduktionsenheden har brug for for at ændre tilstanden. De to første handlinger reducerer eller øger kun tællerbeløbet med 1, så vi behøver kun at definere to objekter med attributtypen, og reduceren håndterer resten. Den tredje handling skal have en nyttelast for at specificere, hvor meget vi vil øge eller formindske tælleren. Erklære dine handlinger i en separat fil kaldet Handlinger:
Som du kan se, er det ret simpelt. Dernæst definerer vi den oprindelige tilstand. Dette gøres i en anden fil sammen med reduktionsenheden:
Vi indstiller starttilstanden til at have et objekt navngivet tæller med attributmængden, startende ved 0. Du kan også se, at den oprindelige tilstand er en konstant og ikke en variabel, hvilket ser ud til at give ingen mening, men vi vil forklare det for dig senere. Dernæst bygger vi reduktionsenheden, som er en funktion, der modtager den aktuelle tilstand og handlingen - som argumenter - for at producere den nye tilstand af applikationen. Her er det:
Vi må ikke mutere tilstanden i reduceren. Hvorfor? Faktisk bør reduktionsenheden ikke ændre tilstandsobjektet direkte. I stedet skal det oprette et nyt objekt, som vil være den nye tilstand. Reacts gengivelsesmotor sammenligner det forrige tilstandsobjekt med det nyeste tilstandsobjekt.
Hvis du ændrer tilstanden direkte, ved React ikke, hvad der er ændret, og det vil have en mangelfuld forestilling om applikationstilstanden. Du kan begynde at læse om dette her. Dette er grunden til, at vi i begyndelsen erklærede den oprindelige tilstand som en konstant og ikke som en variabel, da vi foregiver, at det oprindelige tilstandsobjekt aldrig blev ændret.
Det næste trin er at oprette butikken. Butikken er det objekt, hvor staten er gemt. Det er almindelig praksis at oprette butikken og eksportere den i en separat fil. Tjek det nedenfor:
Vi opretter butikken ved hjælp af createStore () -metoden fra redux, som modtager som argument den reduceringsfunktion, der er defineret tidligere. Med butikken kan vi påkalde handlinger med forsendelsesmetoden (vises senere i denne vejledning) for at ændre tilstanden.
Nu gør vi butikken tilgængelig ved at sende den til leverandørkomponenten, der opsluger vores SimpleCounter-komponent. Hvad Provider-komponenten gør, er at give adgang til butikken i SimpleCounter-komponenten og alle komponenterne inde i den.
Provider-komponenten importeres fra react-redux-biblioteket, som er det officielle bindingsbibliotek for react/react native og redux.Se nedenfor, hvordan du gør det:
Dernæst vil vi forbinde vores komponenter til redux-butikken. Vi kan gøre dette ved at bruge forbindelsesmetoden fra react-redux-biblioteket i vores SimpleCounter-komponentfil, sådan:
Vi er nødt til at videregive to argumenter til forbindelsesmetoden: den komponent, vi vil forbinde (SimpleCounter) og en funktion, der kortlægger applikationstilstanden til vores komponentrekvisitter.
Bemærk, at vi kun har adgang til tilstandsobjektet i MapStateToProps-funktionen, fordi vi opslugte SimpleCounter-komponenten med Provider-komponenten.
Connect-metoden fusionerer objektet, der returneres fra mapStateToProps, med rekvisitterne i SimpleCounter-komponenten for at få adgang til værdien state.counter.amount via this.props.amount.
Forsendelsesmetoden bliver også tilgængelig via rekvisitter, og vi kan nu importere vores handlinger og sende dem inde i SimpleCounter-komponenten. Her er den opdaterede kode for SimpleCounter-komponenten:
Så nu har vi en centraliseret butik, hvor tilstanden gemmes og ændres på en forudsigelig måde gennem handlinger og reduktionsmidler, men du har måske bemærket, at tællerværdien vender tilbage til nul hver gang du opdaterer eller afslutter appen, dette skyldes, at lige nu opretholdes tilstanden ikke, og hver gang du åbner applikationen definerer reduceren tællerværdien til at være nul (den oprindelige tilstand).
Statens vedvarende tilstand er vigtig, hvis du har brug for at vedligeholde visse oplysninger, selv når brugeren lukker applikationen, som login-tokens eller nogle konfigurationsindstillinger. Du kan opnå tilstandspersistens i en React Native-app ved hjælp af redux-persist-biblioteket.
Redux persistent gemmer redux-butikken i et lokalt vedvarende lager og henter det hver gang appen genåbnes eller opdateres. Vi bruger en Android-emulator, men redux-persistent fungerer også med IOS. Lad os starte med at installere redux persistent:
Derefter skal du ændre filen Store.js, som sådan:
Importer først både PersistStore- og PersistReducer-metoder fra redux-persist-biblioteket. Send reduceren til PersistReducer-metoden langs siden af PersistConfig-objektet for at oprette en PersistedReducer.
I PersistConfig-objektet erklærer du, at du vil bruge AsyncStorage til at bevare redux-lageret, som er et uskrypteret nøgleværdilager fra React Native.
Endelig skal du ringe til PersistStore-metoden for at sikre, at vores butik opretholdes. Hvis du har et større projekt, behøver du muligvis ikke at bevare hele tilstanden, i så fald kan du bruge en 'Hvidliste' og 'Blacklist' -metode i PersistConfig-objektet til at vælge, hvilke reduktionsmidler du vil fortsætte, klik på her hvis du vil vide mere.
Til sidst importerer du PersistedStore fra Store.js i filen App.js og opsluger SimpleCounter med PersistGate-komponenten for at sikre, at appens brugergrænseflade ikke gengives, før den vedvarende tilstand hentes og gemmes i redux-butikken.
Vi er nødt til at nævne Redux toolkit, et bibliotek skrevet af redux-udviklerne for at hjælpe med at skabe mere effektiv redux-logik. Brug af dette biblioteks funktioner vil resultere i, at din kode bliver mere kompakt og enklere at læse. Her er en introduktion til nogle af disse funktioner:
Redux værktøjssæt introducerede os med en ny måde at skabe en handling på. Det fungerer sådan:
CreateAction-metoden modtager handlingstypen som et argument og returnerer en funktion til oprettelse af handling. Vi kan derefter kalde denne funktion og videregive nyttelasten som et argument for at oprette handlingsobjektet. Du kan også få adgang til handlingstypen med metoden toString (), som f.eks. IncrementAction.toString (). Denne metode gør det sådan, at vi ikke længere behøver at erklære handlingstyperne som konstanter, der reducerer kodekoden betydeligt.
Dette er en anden metode i redux-værktøjssættet, der sigter mod at forenkle vores kode. Metoden giver os mulighed for at skrive reduktionsmidler med opslagstabelnotationen, så vi kan skrive en meget renere kode. De objekter, der returneres fra createAction () -metoden, kan bruges direkte som tabelnøgler. Efter den forrige reduktionslogik har vi:
Ud over dette bruger createReducer () også Immer til at skrive reduktionsværktøjer med enklere muterende logik. Immer oversætter alle muterende operationer til ækvivalente kopieringsoperationer. Så nu kan vi skrive vores reducer sådan:
Meget enklere synes du ikke?
Funktionen configuRestore () omslutter createStore () -metoden og opretter butikken, der opsætter nogle standardkonfigurationer. Metoden modtager også et konfigurationsobjekt i stedet for en gruppe funktioner, så når du bruger det, skal du passere reduktionsenheden inde i et objekt, der er knyttet til reduceringsattributten. Sådan her:
Butikskonfiguration er et spørgsmål, som vi ikke inkluderede i dette blogindlæg, men vi følte, at det stadig var vigtigt at nævne, så hvis du vil, er du velkommen til at udforske det selv. En ting mere, hvis du vil integrere redux-persistent og redux-toolkit i det samme projekt, har du måske stødt på fejlen 'En ikke-serialiserbar værdi blev opdaget i en handling' dette skyldes, at redux-toolkit's configuRestore () indeholder en serialiserbar kontrol af handlinger, og redux-persistent skal videregive en funktion inde i dem. En måde, du kan løse dette på, er at importere getDefaultMiddleware fra redux-toolkit og deaktivere den serialiserbare kontrol på redux-persistent handlingstyper. Ligesom sådan:
Du kan finde diskussionen og løsningen på dette problem i dette forum.
Der er det. Resultatet skal være en enkel, men funktionel tæller-app. Vi håber, at du lærte, hvordan redux's abstraktioner fungerer sammen og gjorde dig bekendt med de dataflow, de skaber, så det bliver lettere for dig at begynde at anvende redux på din app. Derudover er redux et uafhængigt bibliotek, så den logik, du lærte her, ville være den samme, hvis du ville integrere redux i en webapplikation, der bruger react. Ønsker dig held og lykke med programmering!
Datalogstuderende og ImaginaryCloud deltidstimer. Ivrig efter at lære nye teknologier og teknikker. Tennis og klaverspiller.
People who read this post, also found these interesting:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
