Redux este o parte importantă a ecosistemului React Native. Dacă lumea ta se învârte în jurul JavaScript-ului, probabil ai auzit de Redux. Înainte de a citi restul tutorialului și de a merge mai departe, încercați doar să vă amintiți că aflați doar despre Redux, deoarece vă va face lucrurile mai ușoare și nu mai dificile. Acum permiteți-ne să aflăm de ce aveți nevoie de Redux în aplicația dvs.

Nevoia de Redux

Construirea unei aplicații React sau React Native în lumea reală poate deveni complexă dacă nu există un mod adecvat de a gestiona datele. Dacă la un moment dat datele nu sunt gestionate, lucrurile vor scăpa de sub control. Dacă sunteți familiarizat cu React sau React Native, știți că modalitatea implicită de manipulare a datelor este să le păstrați într-o stare componentă și să le transmiteți componentelor copiilor drept recuzită.

State și Props sunt singurele două modalități de a controla datele dintr-o componentă. Recuzita este scurt pentru proprietăți. Este o regulă simplă de urmat în lumea React că nu ar trebui să mutăm sau să schimbăm valoarea accesoriilor. În React, fluxul de date este unidirecțional sau unidirecțional. Adică, datele pot fi întotdeauna transmise de la un părinte la o componentă copil. Aruncați o privire mai jos la acest exemplu simplu:

Cum se integreaza Redux in aplicatia dvs cu React Native

În exemplul de mai sus, creăm două componente (părinte și copil) în fișiere separate. Componenta părinte constă dintr-o vizualizare în care este redată componenta copil. În componenta copil, vizualizarea redă un mesaj text care este primit de la recuzită. Mesajul de intrare este disponibil ca date în starea componentei părinte.

În acest fel, componenta copil poate fi reutilizată cu alte componente părinte, astfel încât fiecare componentă părinte să aibă propriile date de redat. Rețineți că nu modificăm valoarea this.props în orice moment.

Statul este acolo pentru a muta datele. Acesta este singurul motiv pentru care starea există în cadrul fiecărei componente. Ori de câte ori vrem să schimbăm starea, o folosim this.setState() metoda în cadrul unei componente. Această metodă redă componenta și toate componentele sale secundare pentru a reflecta modificările. Acest lucru funcționează atât în ​​React cât și în React Native în mod similar, dar internele sunt diferite.

1611170349 112 Cum se integreaza Redux in aplicatia dvs cu React Native

Deoarece putem gestiona starea și accesoriile atât de eficient într-o aplicație React Native, de ce este necesar Redux? Ei bine, exemplul de mai sus reprezintă minimul minim și nu un scenariu în timp real. Imaginați-vă o aplicație precum Instagram sau Twitter. Aveți ecrane diferite și fiecare ecran poate depinde de o componentă sau două, cum ar fi părintele și componentele copil reutilizabile din exemplul nostru. Ar fi greu să țineți evidența stării fiecărei componente.

Redux este unul dintre cele mai adoptate moduri de manipulare a datelor. Permite statului să fie împărțit ca un atribut global pe care o întreagă aplicație React Native îl poate folosi și primi sub formă de recuzită. Acest lucru este cunoscut ca crearea unui magazin în Redux. Redux simplifică starea mutându-l într-un singur loc.

Redux utilizează un mecanism de reacție subiacent numit context. Nu vom analiza ce este contextul, deoarece nu intră în sfera acestui articol. Voiam doar să știi că nu se întâmplă nimic magic în culise.

Amintiți-vă doar următorii termeni, deoarece îi vom vedea în acțiune în tutorialul de mai jos:

  • Acțiuni
  • Reductoare
  • Magazin

Cheia învățării Redux este practica. Nu vreau să împărtășesc prea multe informații și să copleșesc lucrurile chiar acum. Deci, să începem prin crearea unei aplicații demo pentru a învăța Redux.

Construirea unei aplicații Pomodoro

Noțiuni introductive despre Expo-CLI?

Pentru a construi această aplicație, voi folosi cel mai recent instrument introdus de echipa Expo numit expo-cli. Instalați-l ca o dependență globală și apoi inițializați un nou proiect React Native folosindu-l.

1611170350 151 Cum se integreaza Redux in aplicatia dvs cu React Native

Pentru a vedea dacă totul funcționează corect în această stare inițială, rulați următoarea comandă.

1611170350 880 Cum se integreaza Redux in aplicatia dvs cu React Native

Vi se va solicita următoarea interfață. Ia-ți ceva timp să treci prin el. Dacă ați creat aplicații folosind Expo XDE sau Create-React-Native-App înainte, veți vedea că nu s-au schimbat multe, cu excepția faptului că acum Expo-CLI folosește browserul Chrome.

1611170350 414 Cum se integreaza Redux in aplicatia dvs cu React Native

Alegeți un simulator sau un dispozitiv care poate rula Expo Client așa cum este marcat în imaginea de mai sus. Dacă obțineți ecranul de mai jos, asta înseamnă că proiectul nostru React Native a fost inițializat fără dificultăți.

1611170350 458 Cum se integreaza Redux in aplicatia dvs cu React Native

Cu aceasta, creați următoarele fișiere și foldere în interiorul components director. Voi discuta de ce urmărim această structură de directoare mai târziu. Deocamdată, configurarea noastră inițială este completă și putem începe să ne construim aplicația.

1611170351 120 Cum se integreaza Redux in aplicatia dvs cu React Native

Componenta temporizatorului ⏱

În primul rând, vom crea o componentă de timer prost și o vom conecta cu App.js. Adăugați următorul cod la Timer/index.js:

1611170351 27 Cum se integreaza Redux in aplicatia dvs cu React Native

Apoi, modificați fișierul App.js fişier:

1611170351 311 Cum se integreaza Redux in aplicatia dvs cu React Native
1611170351 276 Cum se integreaza Redux in aplicatia dvs cu React Native

Vom crea acum o componentă temporizată statică pentru a vedea cum se potrivesc lucrurile. Vom începe prin a modifica fișierul StatusBar. Apoi definim două Text elemente din react-native bibliotecă pentru a specifica unde va fi afișat temporizatorul real și unde vor fi afișate butoanele pentru pornirea și oprirea temporizatorului. Deocamdată, ambele sunt câmpuri de text.

1611170352 320 Cum se integreaza Redux in aplicatia dvs cu React Native
1611170352 183 Cum se integreaza Redux in aplicatia dvs cu React Native

Adăugarea de butoane?

În această secțiune, vom înlocui secțiunea care se afișează Start and Stop Buttons! cu butoane propriu-zise. Vom folosi TouchableOpactiy pentru a face acest lucru să funcționeze. A TouchableOpacity componenta acționează ca un înveliș pentru a face ca imaginile să răspundă corect la atingeri. Opacitatea vizualizării împachetate (sau a butonului în cazul nostru) scade de fiecare dată când un utilizator o atinge.

Creăm o componentă reutilizabilă, deoarece avem nevoie de două butoane: Start și Stop.

1611170352 947 Cum se integreaza Redux in aplicatia dvs cu React Native

Aceasta este o componentă apatridă, deci nu are clasă – avem nevoie doar de ea pentru a reprezenta Butonul în interfața de utilizare a aplicației noastre. De asemenea, importăm pictograme FontAwesome din @expo/vector-icons, care este o furcă de pictograme react-native-vector-și vine direct cu SDK-ul expo. Nu este nevoie să-l instalați ca o dependență separată. Pentru a afișa o pictogramă, trebuie să o definim size.

În sfârșit, în componenta apatridă de mai sus, definim propTypes. Voi discuta cum și de ce ar trebui să folosim PropTypes într-o aplicație React Native într-un alt articol.

Într-o aplicație mobilă, evenimentele sunt declanșate prin atingere. Pentru a rezolva aceste evenimente, vom folosi onPress. Vom avea doar două evenimente aici, Start și Stop. Ambele butoane din aplicația noastră vor folosi onPressOut care diferă de onPress . onPressOut este apelat ori de câte ori atingerea este eliberată de utilizator (când utilizatorul încetează să apese butonul). Se numește înainte onPress și este mai precis într-o situație ca a noastră în care trebuie să pornim sau să oprim cronometrul apăsând butonul de îndată ce utilizatorul a terminat.

Acum vom cere acest lucru Button componentă din componenta noastră Timer.

1611170352 589 Cum se integreaza Redux in aplicatia dvs cu React Native
Cum se integreaza Redux in aplicatia dvs cu React Native

Integrarea Redux?

Până în prezent, aplicația noastră Timer nu face altceva decât să afișeze o UI minimă. Pentru ca acesta să funcționeze, începem prin adăugarea unor dependențe Redux necesare.

1611170353 522 Cum se integreaza Redux in aplicatia dvs cu React Native

Acum, să începem să integrăm Redux în aplicația noastră.

Acțiuni?

În Redux, starea întregii aplicații este reprezentată de un obiect JavaScript. Gândiți-vă la acest obiect ca fiind doar de citire, deoarece nu putem face modificări în această stare (care este reprezentată sub forma unui copac) direct. Avem nevoie actions pentru a face acest lucru.

Acțiunile sunt ca evenimentele din Redux. Acestea pot fi declanșate sub formă de clicuri de mouse, apăsarea tastelor, temporizatoare sau cereri de rețea. Natura fiecărui eveniment menționat este modificabilă. O acțiune este un obiect JavaScript. Pentru a defini o acțiune, există o cerință: fiecare acțiune are o proprietate de tip propriu. Definim aceste tipuri într-un fișier numit types.js:

1611170353 516 Cum se integreaza Redux in aplicatia dvs cu React Native

Aplicația noastră are nevoie doar de trei acțiuni până acum. Tipul oricărei acțiuni este o valoare șir și este definit ca o constantă.

În dosar actions.js, vom solicita aceste tipuri pentru a defini creatorii de acțiuni. Creatorii de acțiuni sunt funcții care creează acțiuni.

1611170353 568 Cum se integreaza Redux in aplicatia dvs cu React Native

Reductoare?

Receptorul acțiunii este cunoscut sub numele de reductor. Ori de câte ori este declanșată o acțiune, starea aplicației se schimbă. Manipularea stării aplicației se face de către reductoare.

Un reductor este o funcție pură care calculează următoarea stare pe baza stării inițiale sau anterioare. Produce întotdeauna aceeași ieșire dacă starea este neschimbată. Este nevoie de două intrări, iar starea și acțiunea trebuie să returneze starea implicită.

1611170354 752 Cum se integreaza Redux in aplicatia dvs cu React Native

În starea noastră inițială, definim trei atribute: isPlaying, elapsedTime și timerDuration. Cronometrul are în prezent o valoare implicită de 6 (secunde) în scopuri de testare, dar valoarea reală pe care urmează să o schimbăm ulterior este 25 (sau 1500 de secunde).

Apoi, există trei funcții de asistență:

  • applyStartTimer va porni cronometrul
  • applyRestartTimer va opri funcția temporizatorului și va seta totul la valorile implicite
  • și în cele din urmă, applyAddSecond va verifica dacă timpul trecut este mai mic decât durata totală a temporizatorului. Dacă da, va adăuga încă o secundă pentru a-și crește valoarea. Dacă nu, va reveni la starea implicită și va opri funcția temporizatorului.

După aceea, ne definim funcția de reducere și exportăm aceeași funcție. Observați cum este organizată funcția reductor. Acesta este un model urmat de majoritatea membrilor comunității pe care i-am văzut pe internet.

Acest este o resursă bună pentru a începe cu Redux în general de Dan Abramov și este GRATUIT!

Creați magazinul Redux?

Cu ajutorul reductorului și a stării inițiale, putem crea obiectul magazin.

1611170354 698 Cum se integreaza Redux in aplicatia dvs cu React Native

Un magazin este un obiect care aduce împreună acțiuni și reduceri. Oferă și menține starea la nivelul aplicației în locul componentelor individuale. Redux nu este o bibliotecă opinionată în ceea ce privește ce cadru sau bibliotecă ar trebui să o folosească sau nu.

Pentru a lega o aplicație React sau React Native cu Redux, o faceți cu react-redux modul. Acest lucru se face folosind componenta ordonată de mare Provider. Practic, trece magazinul la restul aplicației.

Trebuie să legăm creatorii de acțiune cu funcția noastră Timer pentru a o face complet funcțională (astfel încât să răspundă la evenimentele care pot fi atinse sau la pornirea sau repornirea temporizatorului). Vom face acest lucru în Timer/index.js funcţie.

Mai întâi, importăm dependențele necesare pentru a lega creatorii de acțiuni.

1611170354 514 Cum se integreaza Redux in aplicatia dvs cu React Native

bindActionCreators mapează funcțiile de acțiune la un obiect folosind numele funcțiilor de acțiune. Aceste funcții trimit automat acțiunea în magazin atunci când funcția este apelată. Pentru a schimba datele, trebuie să trimitem o acțiune. Pentru a activa acest lucru, avem nevoie de două lucruri: mapStateToProps și mapDispatchToPropsși trebuie să le conectăm pe amândouă cu componenta noastră. Acesta este codul cazanului pe care îl veți rescrie.

Definim aceste două funcții și le modificăm export default declarație după ce definim stilurile pentru punctele noastre de vedere React Native.

1611170354 886 Cum se integreaza Redux in aplicatia dvs cu React Native

mapStateToProps este un obiect care trăiește în magazin ale cărui chei sunt transmise la componentă sub formă de recuzită. Mai jos este codul complet pentru componenta Timer.

Finalizarea aplicației ⚛️ +?

1611170355 785 Cum se integreaza Redux in aplicatia dvs cu React Native

Am creat o funcție personalizată numită formatTime pentru a afișa ora în formatul corect, dar puteți utiliza orice bibliotecă cu temporizator. Apoi, pentru a crește valoarea timpului, folosesc metoda React cycle componentWillReceiveProps. Știu că va renunța în curând, dar deocamdată funcționează. Vedeți mini-aplicația noastră în acțiune mai jos:

1611170355 878 Cum se integreaza Redux in aplicatia dvs cu React Native

Din motive de scurtă durată și de această demonstrație, folosesc doar câteva secunde pentru a afișa temporizatorul. Puteți crește valoarea temporizatorului editând valoarea constantei TIMER_DURATION în reducers.js.

Am ajuns la sfârșitul articolului. Sperăm că v-ați distrat citind-o la fel de mult ca și eu scriind-o. Puteți găsi codul complet pentru acest articol la această repo Github:

amandeepmittal / rn-pomodoro-exemplu
rn-pomodoro-exemplu – React Native + Redux integarationgithub.com

Îți amintești că ți-am spus despre o anumită structură de fișiere pe care am urmat-o în implementarea arhitecturii Redux? Ei bine, se numește re-rațe model și puteți găsi mai multe detalii în acest articol informativ de Alex Moldovan:

Scalarea aplicației Redux cu rațe
Cum se amplifică aplicația dvs. front-end? Cum vă asigurați că codul pe care îl scrieți poate fi menținut timp de 6 luni …medium.freecodecamp.org

? Pentru mai multe întrebări, contactați-mă pe Stare de nervozitate, sau citiți mai multe despre mine la my site-ul web.

Dacă doriți să primiți actualizări la următorul meu articol despre React Native, vă rugăm să luați în considerare înscrierea la newsletter-ul meu.