De la 0 la 1. Înțelegeți cu Redux +13
- 30.10.15 07:52 •
- mishapsv •
- # 269831
- Habrahabr •
- Din nisip •
- 12 •
- la fel ca Forbes, doar mai bine.
Când a apărut versiunea 1.0 a Redux, am decis să-mi petrec puțin timp pe o serie de povestiri despre experiența mea cu el. Recent, a trebuit să select "implementarea fluxului" pentru aplicația client și încă lucrez cu Redux cu plăcere.
De ce Redux?
Redux sugerează gândirea unei aplicații ca o stare inițială printr-o succesiune modificată de acțiuni, pe care o consider o abordare foarte bună pentru aplicațiile web complexe care deschid multe oportunități.
Desigur, puteți găsi mai multe informații despre Redux, arhitectura sa și rolul fiecărei componente în documentație.
Creați o listă de prieteni cu React și Redux
Astăzi ne vom concentra pe crearea pas cu pas a primei dvs. aplicații utilizând Redakt și React: creați o listă simplă de prieteni de la zero.
Aici puteți găsi codul gata.
1. Instalare
Există ansambluri deja instalate cu Redux, dar cred că este important să înțelegem rolul fiecărei biblioteci.
1.1 Se adaugă redux, reac-redux și redux-devtools
Trebuie să instalăm trei pachete:
- Redux: biblioteca în sine
- React-redux: o grămadă cu React
- Redux-devtools: opțional, oferă câteva instrumente utile de dezvoltare.
1.2 Structura directorului
Deși ceea ce vom face este destul de simplu, să creăm o structură de directoare pentru aplicația reală.
Vom vedea în detaliu rolul fiecăruia dintre directoare când creăm aplicația. Am mutat App.js în directorul cu containere, deci va trebui să configurați instrucțiunea de import în index.js.
1.3 Conectați Redux
Trebuie să activați devtools numai pentru mediul de dezvoltare, deci modificăm webpack.config.js astfel:
Atunci când rulați aplicația noastră cu DEBUG = true npm start. aceasta va include pavilionul __DEV__ pe care îl putem folosi în aplicația noastră. Putem conecta devtools după cum urmează:
Facem două lucruri aici. Suprasăm creaStore folosind funcția creată, ceea ce ne permite să folosim mai multe agenți de îmbunătățire a stocării. cum ar fi devTools. De asemenea, includem funcția renderDevTools, care reda DebugPanel.
Acum trebuie să modificăm App.js pentru a vă conecta la redux. Pentru a face acest lucru, vom folosi Furnizorul din reac-redux. Acest lucru va face ca instanța noastră din depozit să fie disponibilă pentru toate componentele care se află în componenta Provider. Nu este nevoie să vă faceți griji cu privire la caracteristicile ciudat cu aspect, ea își propune să utilizeze „context“ reactiv pentru a crea magazia, accesibilă tuturor copiilor (componente).
Pentru a crea depozitul, folosim funcția createStore, pe care am definit-o în fișierul devTools, ca harta tuturor riderilor noștri.
Importul sintaxei ES6 * ca reductoare ne permite să obținem obiectul în formă
În aplicația noastră App.js, wrapper-ul exterior pentru Redux și FriendListApp este componenta rădăcină pentru aplicația noastră. După crearea unei simple "Hello world" în FriendListApp.js, putem lansa în sfârșit aplicația noastră cu redux și devTools. Ar trebui să obțineți acest lucru (fără stiluri).
Deși este doar o aplicație "Hello world", am activat Hot Reloading, adică Puteți modifica textul și puteți obține actualizări automate pe ecran. După cum puteți vedea, devtoolii din dreapta arată depozite goale. Umpleți-le!
2. Creați o aplicație
Acum că toate setările au fost făcute, ne putem concentra asupra aplicației în sine.
2.1. Generatoare de acțiuni și acțiuni
O acțiune este o structură care transferă datele din aplicația dvs. în seif. Prin convenție, acțiunile trebuie să aibă un tip de câmp șir. care indică tipul acțiunii care trebuie efectuată. Determinați acest tip într-un alt modul? - Bune practici, iar acest lucru ne face să gândim în prealabil cu privire la ceea ce vom face în cererea noastră.
După cum puteți vedea, acesta este un mod foarte expresiv de definire a scopului aplicației noastre, care ne va permite să adăugăm prieteni, să le marcați drept "favorite" sau să le eliminăm din lista noastră.
Generatoarele de acțiuni sunt funcții care creează acțiuni. În Redux, generatoarele de acțiuni sunt funcții pure, ceea ce le face portabile și ușor de testat, deoarece acestea nu au efecte secundare.
Le vom pune în dosarul de acțiune, dar nu uitați că acestea sunt concepte diferite.
După cum puteți vedea, acțiunile sunt destul de minimaliste. Pentru a adăuga un element, raportăm toate proprietățile (aici avem doar numele), iar pentru alții se face referire la id. Într-o aplicație mai complexă, s-ar putea să fi tratat acțiuni asincrone, dar acesta este un subiect pentru un alt articol ...
2.2 Reductoare
Reducătorii sunt responsabili pentru modificarea stărilor aplicației. Ele sunt funcții pure cu următoarea formă (previousState, action) => newState. Este foarte important să înțelegeți că nu trebuie niciodată (niciodată) să schimbați starea inițială în redacție. În schimb, puteți crea obiecte noi bazate pe proprietățile precedentei. În caz contrar, poate avea consecințe nedorite. De asemenea, acesta nu este locul pentru a gestiona efectele secundare, cum ar fi rutarea sau apelurile asincrone.
În primul rând, determinăm starea aplicației noastre în starea inițială:
Statul poate fi orice vrem, putem să ținem o grămadă de prieteni. Dar această soluție scade slab, așa că vom folosi id-ul și harta de prieteni. Acest lucru poate fi citit în normalizer.
Acum trebuie să scriem un newsreader actualizat. Vom folosi capabilitățile ES6 pentru a specifica argumentele implicite pentru tratarea cazurilor atunci când statul nu este definit. Acest lucru va ajuta să înțelegeți cum să scrieți editorul, în acest caz folosesc comutatorul.
Dacă nu sunteți familiarizat cu sintaxa lui ES6 / 7, atunci este dificil să îl citiți. pentru că trebuie să întoarcem o nouă stare a obiectului, de obicei folosim Object.assign sau Spread operator.
Ce se întâmplă aici: definim un nou id. Într-o aplicație reală, putem să o luăm de la un server sau cel puțin să ne asigurăm că este unică. Apoi vom folosi concat pentru a adăuga acest id nou în lista noastră id. Concat adaugă o nouă matrice și nu schimba originalul.
Proprietăți compuse -? Acestea sunt caracteristicile convenabile ale ES6, care ne permit să creăm chei dinamice în obiectul friendsById cu [newId].
După cum puteți vedea, în ciuda sintaxei care poate fi confuză la început, logica este simplă. Ați stabilit statul și ați înapoiat un nou stat. Important: în nici un moment în acest proces nu se modifică starea anterioară.
Bine, să ne întoarcem și să creăm reranjerii pentru celelalte două acțiuni:
Am adăugat lodash pentru a simplifica gestionarea obiectelor. Ca de obicei, în aceste două exemple, este important să nu schimbăm starea anterioară, deci folosim o funcție care returnează un obiect nou. De exemplu, în loc de a șterge state.friendsById [action.id]. folosim funcția _.omit.
De asemenea, puteți observa că operatorul de răspândire ne permite să manipulăm numai acele stări pe care trebuie să le schimbăm.
Redux nu contează cum stocați datele, deci puteți utiliza Immutable.js.
Acum puteți să jucați cu seiful ocolind interfața, apelând expedierea manuală în App.js.
Veți vedea acțiuni în devTools, puteți juca cu ei în timp real.
3. Creați o interfață
pentru că această lecție nu este despre acest lucru, am pierdut crearea de componente React și sa concentrat doar pe Redax. Avem trei componente simple:
- Lista de prieteni FriendList
- prieteni: array de prieteni
- prieteni: array de prieteni
- FriendListItem un element prieten
-
- nume: numele prietenului șir
- cu stea: boolean arată un asterisc dacă un prieten este marcat ca favorit
- starFriend: funcția de apel care se declanșează atunci când utilizatorul dă clic pe asteriscuri
- deleteFriend: funcția de apel care se declanșează atunci când utilizatorul face clic pe coșul de gunoi
- Câmpul AddFriendInput pentru introducerea noilor nume
- addFriend: apel de funcționare, clic-declanșat
În Redux se consideră o practică bună de a face majoritatea componentelor "stupid", dacă este posibil. Ie Cele mai putine componente asociate cu Redux, cu atât mai bine.
Aici, FriendListApp va fi singura componentă "inteligentă".
Aceasta face parte din noua sintaxă ES7, numită decorator. Acesta este un mod convenabil de a apela o funcție de ordin superior. Aceasta va fi echivalentă cu conectarea (selectați) (FriendListApp); unde select este o funcție care returnează ceea ce am făcut aici.
Folosim bindActionCreators. Pentru a împacheta generatoarele noastre de acțiuni sunând la expediere. Scopul este de a transmite generatoarele de acțiuni celorlalte componente fără a furniza un obiect de expediere (păstrându-i prostie).
Ce se întâmplă în continuare este abordarea standard pentru React. Vom lega funcțiile pe proprietățile onClick, onChange sau onKeyDown pentru a procesa acțiunile utilizatorului.
Dacă sunteți interesat de modul în care puteți face acest lucru, puteți vedea tot codul.
Acum puteți simți magia aplicației redux / react. Așa cum este imaginat pe GIF, înregistrați toate acțiunile.
Este mai convenabil să se dezvolte atunci când poți să faci niște acțiuni, să găsești bug-uri, să te întorci, să le corecti și să repeți secvența deja corectată ...
Trimiteți-le prietenilor: