Share
React este o bibliotecă JavaScript pentru construirea de interfețe utilizator care au luat lumea dezvoltării web de furtună. Cu toate acestea, într-o comunitate care favorizează alegerea și flexibilitatea, poate fi greu să știți de unde să începeți!
Nu vă faceți griji - unele modele și module au apărut ca cele mai bune practici. Unul dintre acestea este Redux pentru gestionarea stării aplicației.
În acest videoclip de la cursul despre Aplicații Web moderne Cu React și Redux, vă voi arăta cum să utilizați reacționează-Redux pachet.
Este o aplicație optimă în aplicațiile Redux de a face o distincție între componentele de prezentare și componentele containerului. În acest videoclip, voi explica ce sunt acestea și cum le putem folosi.
Voi face referire la codul pe care l-am creat deja în părțile anterioare ale cursului, dar ar trebui să puteți urmări și să vedem ce fac. Puteți găsi codul sursă complet al cursului pe GitHub.
Accentsconagua
reacționează-Redux Pachetreacționează-Redux?În părțile anterioare ale acestui curs, am construit o mostră de aplicații utilizând React și Redux. Cu toate acestea, aproape toate componentele noastre trebuie să lucreze cu magazinul, fie prin citirea unor stări specifice, fie prin expedierea acțiunilor înapoi la magazin. Rețineți că magazinul Redux deține toată starea pentru întreaga dvs. aplicație. Aceasta înseamnă că majoritatea, dacă nu toate, componentele noastre trebuie să aibă posibilitatea de a accesa magazinul într-un fel.
Până acum, avem un obiect de magazin global pe care îl putem accesa direct în secțiunea în care atribuim proprietățile bara noastră laterală.
Cu toate acestea, având un magazin global ca acesta nu este grozav din multe motive. Unul dintre cele mai simple motive este că nu este de fapt global - este accesibil doar din interiorul acestui fișier. Asta inseamna ca ar fi trebuit sa o folosim din acest fisier sau ar fi trebuit sa incepem sa il trecem de la acest fisier in alte fisiere, ceea ce va deveni foarte murdar.
De asemenea, dacă avem o mulțime de componente imbricate, înseamnă că dacă o componentă între ele nu are într-adevăr nevoie de magazin, dar unul dintre copiii săi o face, trebuie să o trecem la acea parte între ele, oricum, pentru că are nevoie de ea pentru a putea să o transmită copilului său.
Acum ar fi frumos dacă ar fi putut să dăm toate componentele noastre accesul la magazin fără a avea o variabilă globală și fără a trece manual.
Și adevărul este că există o cale. Putem folosi un pachet numit reacționează-Redux. Puteți citi mai multe despre ideile din spatele acestui pachet, dacă vă îndreptați către documentația Redux.
reacționează-Redux LucrăriUna dintre ideile principale din spatele acestui pachet este ideea componentelor de prezentare și a componentelor containerului. Practic, ne putem rupe aplicația în două seturi de componente.
Primul set este componenta de prezentare. Acestea sunt preocupate de modul în care arată lucrurile. Nu trebuie să fie conștienți de Redux deloc. Au citit doar datele din proprietățile lor și pot schimba datele prin invocarea apelurilor de apel pe care le atribuim și ca proprietăți.
Containerele, pe de altă parte, sunt conștiente de Redux și se abonează în mod specific la starea Redux și expediază acțiunile Redux. Putem crea o componentă de container prin simpla înfășurare a unei componente de prezentare cu unele dintre aceste instrucțiuni.
Acum, să ne aruncăm cu capul în jos și să vedem cum poate funcționa acest lucru. Vom folosi bara laterală ca exemplu de componentă pe care o putem împărți în componente de prezentare și de container.
Acum, s-ar putea să fii puțin confuz aici cum vom împărți bara noastră laterală în două componente separate. Dar adevărul este că componentele containerului vor fi mereu înfășurate în componentele de prezentare. De fapt, de multe ori puteți avea o componentă de prezentare care are doar o singură treabă și care urmează să fie înfășurată de o componentă specifică a containerului. Exact asta vom face cu bara laterală.
reacționează-Redux Desigur, va trebui să începem prin instalarea bibliotecii react-redux. Așa că hai să facem npm instalează -save reac-redux.
Când a fost instalat, putem continua și le putem importa import Provider de la "react-redux"; în fișierul nostru principal, app.js. În acest fișier, de fapt, avem nevoie doar de componenta furnizorului oferită de noi prin reac-redux.
Componenta furnizorului este de fapt partea reacționată-redux care va lua magazinul nostru și îl va transfera la aceste componente diferite. De fapt, ceea ce se întâmplă este că, în spatele scenei, furnizorul utilizează caracteristica context a React. Deci, dacă aveți o experiență React puțin mai avansată și ați jucat în prealabil cu contextul, acest lucru vă poate oferi o perspectivă asupra modului în care prestatorul lucrează exact.
Furnizorul face de fapt într-adevăr, foarte simplu de a utiliza magazin peste tot. Tot ce trebuie să facem este să înfășurăm componenta de aplicație de nivel superior într-o componentă a furnizorului, după cum se arată aici:
Și acum aplicația noastră folosește furnizorul de reac-redux.
conectați() FuncţieAcum, hai să ne deschidem dosarul bara laterală și să importăm conectați() funcția de la reacționează-Redux. conectați() ne permite să definim exact ce proprietăți și funcții vrem să aibă o componentă de container și apoi să luăm această definiție, să o aplicăm unei componente de prezentare și să obținem o componentă completă React.
Acum înțeleg că sună puțin confuz. Să vedem cum se face acest lucru.
Frumusețea bara laterală pe care am scris-o deja este că este de fapt deja o componentă de prezentare.
În primul rând, bara noastră laterală este doar cu adevărat preocupată de modul în care arată lucrurile. Ne dă stil de marcare, bineînțeles, și nu este deloc conștient de Redux. Avem aceste metode pe care le numim showAddDeck, addDeck, și hideAddDeck, dar aceste metode știu despre Redux. Bara laterală însăși nu știe nimic despre Redux. De fapt, dacă vrem să scoatem Redux din acest proiect și să folosim o alternativă, putem schimba definițiile acestor funcții, iar această componentă a barei laterale nu trebuie să se schimbe deloc. Numesc doar aceste funcții.
Cum citește datele? Ei bine, doar citește date din proprietățile pe care le-am dat. Ce zici de schimbarea datelor? Ei bine, invocă apeluri de apel care provin din proprietăți. Avem trei metode și când le invocă, datele sunt schimbate în magazin. Și în cele din urmă, desigur, da, este scrisă manual. Și după cum veți vedea într-o secundă, componentele containerului vor fi generate de react-redux.
Deci, avem deja una din cele două piese de care avem nevoie: această bara laterală este o componentă de prezentare. Următorul lucru pe care vrem să îl facem este să luăm aceste definiții de proprietate pe care le dăm barei laterale și, în loc să le definim aici, le vom defini ca parte a componentei noastre de container.
Deci, voi copia aceste linii:
Și le voi lipi în partea de sus aici:
Acum, aceste proprietăți sunt împărțite frumos în două seturi: proprietățile care sunt date și proprietățile care sunt funcții de apel, care efectuează acțiuni care schimbă magazinul.
Deci, ceea ce trebuie să facem acum este să creeze două funcții care vor cartografia starea acestor proprietăți. În mod tradițional, în cadrul React, aceste funcții sunt numite mapStateToProps și mapDispatchToProps.
Deci, să mergem mai departe și să începem mapStateToProps. Aceasta este o funcție care va primi cea mai recentă stare din magazin.
Trebuie doar să întoarcem un obiect, care va avea două proprietăți și, după cum am văzut deja, sunt punți și addingDeck proprietăți. Deci, de fapt, pot să le copiez și să le lipesc aici, deoarece acestea sunt practic aceleași date - trebuie doar să convertim sintaxa ca obiect de sintaxă literală obiect în loc de sintaxă JSX.
Deci asta e al nostru mapStateToProps funcţie. Practic, acesta ia doar starea curentă din magazin și returnează orice date sau componente de prezentare necesare. Deci are nevoie de punți si addingDeck proprietatea, și astfel îi returnează pe cei din interiorul unui obiect.
Putem face câteva lucruri pentru a curăța puțin acest lucru. Mai întâi de toate, am putea să scăpăm efectiv de aceste bretele curlate care sunt blocul pentru această funcție deoarece avem doar o declarație că ne întoarcem. Dar atunci, pentru că avem doar acea singură linie, putem să scăpăm de declarația de returnare.
Cu toate acestea, acum avem acolade în jurul valorii de literal obiect, și JavaScript va crede că acesta este un bloc de funcții, așa că le vom înfășura în paranteze.
Putem scurta acest lucru ceva mai mult, pentru că nu avem nevoie de obiectul întreg de stat, așa că putem folosi doar sintaxa de distrugere și spunem că vrem doar punți proprietate și addingDeck proprietate din acest obiect.
Desigur, atunci, în interiorul acestei funcții, nu spunem state.decks, noi spunem punți. Și nu spunem state.addingDeck, noi spunem addingDeck. Și acum cred că puteți vedea unde mergem cu asta - pentru că cheia și proprietatea au același nume, putem scăpa de unul dintre aceștia și putem spune punți și addingDeck.
Și aceasta este versiunea mai scurtă a funcției noastre datorită ES6.
Și acum, ce zici mapDispatchToProps? Ei bine, și aceasta este o funcție și va dura expediere ca singurul său parametru. Acum expedierea, desigur, este funcția de expediere a magazinului.
Încă o dată, vom reveni la un obiect literal, așa că nu uitați acele paranteze, iar în interior avem nevoie de cele trei proprietăți pe care le avem la început: addDeck, showAddDeck, și hideAddDeck. Deci, acum avem o funcție care cartografiază funcția de expediere la cele trei callback-uri de care avem nevoie pentru o bara laterală.
Deci, acum avem tot ce avem nevoie pentru a crea componenta noastră container. Avem două funcții care vor hartă obiectul nostru de stare în funcția de expediere la proprietățile pe care această funcție le are nevoie. Și avem o componentă de prezentare care așteaptă aceste proprietăți.
Acum conectați() este ceea ce putem folosi pentru a conecta aceste două funcții de mapare cu o componentă de prezentare. Și ce va reveni această funcție de conectare este componenta noastră de container. De fapt nu vom mai scrie o componentă aici - în schimb, trecem aceste trei piese în conectați() funcția și va reveni la componenta noastră de container.
Deci, în jos, în loc de a exporta bara laterală, să exportăm un apel către conectați(). Vom trece doi parametri - mapStateToProps și mapDispatchToProps Funcții și- conectați() va reveni la o nouă funcție.
conectare implicită la export (mapStateToProps, mapDispatchToProps) (Bara laterală);
Acum, ceea ce este de fapt exportat din acest fișier nu este o bară laterală de prezentare, ci este noua noastră componentă de container, care, în afara acestei funcții, ne-am putea referi la
Deci asta este reacționează-Redux pachet în acțiune. Puteți verifica fișierele sursă ale cursului pe GitHub pentru a vedea cum funcționează codul în întregime.
În cursul complet, Modern Web Apps Cu React și Redux, vă voi arăta cum să începeți să construiți aplicații web moderne cu React și Redux.
Pornind de la nimic, veți folosi aceste două biblioteci pentru a construi o aplicație web completă. Veți începe cu cea mai simplă arhitectură posibilă și veți construi încet aplicația, caracteristică după caracteristică. Veți învăța despre concepte de bază cum ar fi scule, reductoare și rutare. De asemenea, veți afla despre unele tehnici mai avansate, cum ar fi componentele inteligente și prostești, componentele pure și acțiunile asincrone. Până la urmă, ați creat o aplicație completă de cărți flash pentru învățarea prin repetări distanțate.
Pe parcurs, veți avea șansa de a vă îmbunătăți abilitățile ES6 (ECMAScript 2015) și de a afla modelele și modulele care funcționează cel mai bine cu React și Redux!
De asemenea, vă puteți baza pe cunoștințele dvs. despre React cu aceste cursuri:
