Începeți cu Redux Thunk

Statul este o mare parte a unei aplicații reactive, motiv pentru care Redux este asociată cu ea. Aceste date provin adesea dintr-o bază de date, care necesită o cerere și un răspuns. Pentru unele aplicații, această comunicare poate fi constantă. Poate fi dificil să încerci să gestionezi numai în componentele reacționate.

Acest lucru introduce și unele probleme noi - ceea ce se întâmplă dacă se încarcă încet sau nu se încarcă deloc? Fiecare componentă care se ocupă de date asincrone ar trebui să conțină logică pentru a gestiona aceste scenarii.

Un "Thunk" este un concept care poate ajuta la această situație. Fiecare Thark este o funcție care returnează o altă funcție. Această funcție poate fi apoi numită la un punct ulterior, la fel ca un apel invers. Dacă am putea expedia un Thark în loc de un obiect de acțiune, putem adăuga o logică suplimentară ca reacție la un alt eveniment.

Redux Thunk este o bibliotecă care stă între acțiunile expediate și reductorul. Când vede o tanjă este expediată, aceasta trece câteva metode în funcția returnată care poate fi utilizată pentru a expedia acțiuni suplimentare, cum ar fi un eveniment de succes sau de eroare.

• 20 pluginuri strălucitoare jQuery

În acest tutorial, vom folosi Thunks pentru a ajuta la tragerea datelor de la un server mai degrabă decât de la un fișier JSON, care lucrează cu Photoshare. - o aplicație foto-comentare alimentată de Redux.

Ai un nou proiect de site, dar ai nevoie să rămână simplu? Iată ghizii noștri la cele mai bune Builder de site-uri web și web hosting serviciu. Partajarea fișierelor cu alții? Ia-ti Stocare in cloud dreapta.

Descărcați fișierele pentru acest tutorial.

01. Instalați dependențele

Există două părți la acest proiect - site-ul frontal și serverul de capăt din spate pe care îl desfășoară. În timp ce tutorialul se concentrează pe capătul frontal, avem nevoie de un server care rulează pentru a aduce fotografiile. Descărcați fișierele de proiect și instalați dependențele atât pentru site, cât și pentru server. Rulați serverele pentru ambele și lăsați-le să alerge în fundal.

 / * un terminal interior / site * /
& gt; fire
& gt; Fire Start.
/ * un terminal interior / server * /
& gt; fire
& gt; Start fire 

02. Configurați middleware

Redx Thunk este a middleware - Funcționalitatea care stă între acțiuni și reductori care pot schimba modul în care se comportă aceste acțiuni. Redux acceptă mai multe seturi de middleware care acoperă întreaga aplicație. Se adaugă când magazinul este creat folosind Compune metodă. Adăugați middleware la CreateStore. metodă în cadrul index.js.

 Import {Appresmddleware, compune}
de la "redx";
Importați Thunk de la "Redux-Thunk";
[...]
Const Store = CreateStore (
rootreducer,
Compune(
ApplyMiddleware (Thunk),
devtools.
)
); 

03. Configurarea creatorilor de acțiune

Primul lucru pe care trebuie să-l facem acum este să încărcați fotografiile în galerie. Ca acțiuni regulate, avem nevoie de creatori de acțiuni pentru diferitele afirmații pe care o va lua un apel asincron. Majoritatea vor avea start , succes și eroare acțiuni. Acestea se lasă să știe ce face JavaScript ocupat. În acțiuni / fotografii / poze.js , a înființat trei creatori de acțiune pentru aceste state diferite.

 Export Const LoadgalleryStart = () = & gt; ({{{
Tip: load_gallery_start});
Export Const LoadgallerySuccess =
Fotografii = & gt; ({{{
Tip: load_gallery_success,
Fotografii
});
Export Const LoadgalLerror = () = & gt; ({{{
Tipul: load_gallery_error}); 

04. Creați o taxă pentru încărcare

Thunks lucrează exact la fel ca și creatorii de acțiune. Încă am expediam valoarea de returnare, dar de data aceasta returnează o funcție în locul unui obiect. Middleware-ul pe care l-am configurat mai devreme va trece o metodă de expediere în funcția returnată. Acest lucru ne permite să trimitem mai multe acțiuni la redx după expedierea inițială. Creeaza o loadgallery. metodă care returnează o funcție. Deocamdată, aveți o acțiune pentru a arăta că galeria se încarcă încă.

 Export Const Loadgallery = () = & gt;
expediere = & gt; {
expedierea (loadgallerystart ());
}; 

05. Încărcați datele de pe server

Acum suntem gata să începem să luăm de la serverul pe care l-am înființat la început. Putem face acest lucru folosind Axios. - Un pachet conceput pentru a lucra cu promisiuni pe diferite browsere. Import Axios. și faceți o cerere pentru fotografiile din interiorul loadgallery. . Dacă promisiunea rezolvă, expediați acțiunea de succes și dacă nu expediați acțiunea de eroare. Cu asta, structura Thark este completă.

 Axioane de import de la "axios";
[...]
retur axios.
.get ("http: // localhost: 3001 / poze")
. Atunci (răspuns = & gt; expediere (
loadgallerysuccess (răspuns.data)))
.Catch (() = & gt; expediere (
loadgalleryError ())); 

06. Dispecerata Thunk

Thunsa nu va face nimic până când nu a fost expediată. Putem face acest lucru într-o componentă reacțională ca orice altă acțiune. Un moment bun pentru a începe încărcarea fotografiilor este atunci când utilizatorul vizualizează galeria principală. Putem folosi reacția ComponentaDidmount. Metoda de ciclu de viață ca declanșator, după verificarea galeriei nu este deja încărcată. În Componente / Container / Galerie / Galerie.Js Expediere A. loadgallery. acțiune prin adăugarea acestuia MapDispathtoprops și îl numește înăuntru ComponentaDidmount. .

 ComponentDidmount () {
Dacă (! Acest.props.photosloaded) {
the.props.loadgallery ();
}
}
Export const hapdispatchtoprops =
 expediere = & gt; ({{{
loadgallery: () = & gt;
expediere (loadgallery ()),
}); 

07. Adăugați fotografii pe succes

Când fotografiile revin de la server, expediem a Load_gallery_success. Acțiune cu fotografiile. Trebuie să luăm acest lucru în stat prin intermediul Fotografii reductor. Se îndoi Reductoare / fotografii / fotografii.js și adăugați un caz pentru acțiunea de succes. Sarcina utilă conține toate fotografiile ca o matrice. Odată ce statul este actualizat, selectorul foto trece fotografiile prin componenta galeriei care urmează să fie afișată.

 Case load_gallery_success:
returnați acțiunea.photos; 

08. Configurați UI

În prezent, fotografiile apar brusc după ce sunt încărcate. Pe o conexiune mai lentă, utilizatorul se va uita la un ecran gol până când cererea se termină, dacă o face vreodată. Acțiunile pe care le trimitem la încărcarea fotografiilor pot fi, de asemenea, luate în reductorul UI pentru a menține interfața la curent cu ceea ce se întâmplă. Actualizați sarcinile de încărcare și de eroare în reductorul UI la Reductoare / UI / UI.js .

 Case load_gallery_error:
Returnați {... State,
Încărcare: falsă, eroare: TRUE};
Case load_gallery_start:
Returnați {... State,
Încărcare: TRUE, EROARE: FALSE};
Case load_gallery_success:
Returnați {... State,
Încărcare: falsă}; 

09. Adăugați selectorul de încărcare și de eroare

Ca și în cazul fotografiilor galeriei, avem nevoie de selectori pentru a obține diferitele valori ale statelor UI din Redux. Le putem trece la galerie, care va face apoi elemente diferite dacă una este adevărată. În Selectori / UI / UI.js , Adăugați câteva funcții pentru a obține valorile.

 Export const isgalleratorred =
 stat = & gt; state.ui.error;
Export const isgallesarcing =
 stat = & gt; state.ui.loading; 

10. Adăugați date către GalleryContainer

Cu selectorii gata, ei pot fi adăugați acum la Galerie componenta containerului. Adăugarea acestora aici înseamnă că componenta responsabilă pentru afișarea galeriei nu trebuie să știe despre modul în care au sosit datele. Se îndoi Container / Galerie / Galerie.Js și adăugați selectorii la MapstateToprops . Faceți constante pentru valorile pentru a vă ajuta să afișați statul în pasul următor.

 const {eroare, încărcare,
 fotografii} = this.props;
[...]
Export const hapstatetoprops =
 stat = & gt; ({{{
EROARE: ISGALIERRORAD (STAT),
Încărcare: ISGALELABLAGING (STAT),
 }); 

11. Afișați starea de încărcare și eroare

În timp ce avem eroarea și încărcarea recuzită, în prezent nu există nici un UI pentru a indica când sunt active. Aceste recuzite sunt valori booleene, ceea ce înseamnă că putem comuta afișarea componentelor atunci când sunt adevărate. Actualizați metoda de redare pentru a vă asigura că "Eroare și GT; și Componentele sunt în locul galeriei când este necesar.

 Dacă (eroare) {
RETURN & LT; ERROR / & GT;
}
Dacă (încărcați) {
Return & loading / & gt;
} 

12. Fă-ți din nou galeria din nou

Cu galeria încărcată, putem trece la o fotografie individuală. Dacă faceți clic pe oricare dintre fotografiile și răcoritoare pagina nu încărcați fotografia înapoi, deoarece nu există instrucțiuni pe această pagină încă pentru a încărca galeria. Deschis container / fotografie / foto.js și încărcați galeria în ComponentaDidmount. Ca și în Galerie componentă. fotografiere foto Verificarea nu va încerca să încărcați din nou fotografiile dacă au fost deja încărcate în galerie.

 Dacă (! Acest.props.photosloaded) {
the.props.loadgallery ();
} 

13. Adăugați un nou comentariu

Utilizatorul poate face clic pe fotografia unde doresc să lase un comentariu. Componenta de prezentare a fotografiilor va rula addnewcomment. funcție de poziție atunci când se întâmplă acest lucru. În interiorul addnewcomment. Funcție, calculați punctul în care utilizatorul a făcut clic pe fotografie. Serverul necesită o valoare procentuală întregă mai mare atunci când este salvată.

 Const foto = e.target
 .GetBoundingClientereCord ();
const top = e.clientx - photo.left;
const stânga = e.lienty - photo.top;
const toppc = mateth.round ((partea de sus /
 photo.width) * 100);
const stânga = mateth.round ((stânga /
 photo.hight) * 100); 

14. Spuneți redx despre comentariu

Cu poziția calculată, atunci trebuie să spunem redx despre comentariu, astfel încât să poată afișa formularul de comentariu. Există deja o acțiune creată pentru a adăuga noul comentariu pe ecran. Adăuga addnewcomment. în MapDispathtoprops și sunați după ce am calculat poziția clicului.

 acest.props.addNewcomment (
 TOPPC, stânga);
[...]
Export const hapdispatchtoprops =
 expediere = & gt; ({{{
addnewcomment: (partea de sus, stânga) = & gt;
expedierea (addnewcomment (partea de sus, stânga)),
});

15. Spuneți fotografiei despre noul comentariu

Când sunt transmise noi informații de comentarii la Redux, trebuie să o trecem în componenta de prezentare foto. Acest lucru permite acestuia să arate formularul în acea poziție. Găsi Primește-te selector, adăugați-l la MapstateToprops și să treacă propriul & lt; fotografie & gt; .

 Export const hapstatetoprops =
 (stat, recuzită) = & gt; ({{{
Newcomment: GetNewcomment (stat),
});
& lt; fotografie [...] Newcomment = {
 the.props.newcomment} / & gt; 

16. Apelați-vă în comentariu

Dacă faceți clic pe fotografie, acum veți aduce noul formular de comentariu. Aceasta este propria componentă conectată. Când formularul este trimis, acesta numește a Trimite comentariu funcție de poziție și trece. Acesta este un Thunk pe care îl vom face. Deschide Container / Newcomment / Newcomments.js și adăugați Thunk la MapDispathtoprops . Treceți acea propunere în componenta de prezentare redată.

 & lt; Newcomment [...]
 Trimiterea = {Trimiteți} / & GT;
Export const hapdispatchtoprops =
 expediere = & gt; ({{{
Trimiterea: Comentariu = & GT; expediere(
Trimiterea (comentariu))
});

17. Adunați conținut pentru Thunk

Tharkul de a adăuga un nou comentariu are o structură similară cu preluarea galeriei, inclusiv o acțiune de început, de succes și de eroare. Există un argument suplimentar trecut în această Thunk - Getstate. funcţie. Acest lucru permite accesul direct la starea actuală pentru a apuca date din acesta. Creați. Trimite comentariu Thunk In Acțiuni / Newcomment / Newcomments.js . Fiecare comentariu este asociat cu o fotografie și un utilizator. Pentru acest tutorial, ID-ul de utilizator este codat greu în utilizator reductor.

 Export Const Trimitere = Comentariu
 = & gt; (expediere, getstate) = & gt; {
expedierea (Trimiteți-vă ());
const currentphotoid =
getcurrenthotoid (getstate ());
const utilizator =.
getcurrentuser (getstate ());
const {stânga, sus} =
primește comunicare (getstate ());
}; 

18. Postați cererea

Cu toate datele necesare în vigoare, putem trimite comentariul. AXIOS are A. post metodă de a face față POST Solicitări, cu al doilea argument fiind datele care trimit în această cerere. Adăugați cererea către Thunk, trecând în date în caz de șarpe pentru a se potrivi cu ce așteaptă serverul.

 Axioane de întoarcere
.post(
"http: // localhost: 3001 / comments", {
user_id: user.id,
photo_id: actualphotoid,
cometariu,
stânga,
top
}) 

19. Manipulați succesul și eroarea

Dacă promisiunea de la AXIOS rezolvă sau respinge, trebuie să spunem cererea despre aceasta. Dacă se rezolvă cu succes, serverul va transmite înapoi conținutul comentariului. Ar trebui să trecem asta cu acțiunea de succes. Dacă este respinsă, incendiați o acțiune de eroare. Actualizați promisiunea cu atunci și captură blocuri.

. Atunci (({Date: {{
 id, comentariu, stânga, sus}}) = & gt;
expediere(
TrimitețiComprimăCesuccess (
id, comentariu, stânga, sus,
Utilizator, actualphotoid)
)
)
.Catch (() = & gt; expediere (
 TrimitețiCommenterrror ())); 

20. Adăugați comentariu la fotografie

Chiar acum, odată ce comentariul este adăugat cu succes, acesta se eliberează de pe ecran, dar nu este vizibil până când pagina se actualizează. Putem actualiza fotografiile Reducer pentru a vă ridica pe noul comentariu și adăugați-l la matricea de comentarii, pentru a afișa ca restul lor. Deschideți reductor / fotografii / fotografii.js și adăugați un caz pentru a gestiona acțiunea. Creați o copie a statului pentru a vă asigura că nu mutăm accidental starea existentă.

 Cazul Trimite_Comment_Success:
const {id, comentariu, sus, stânga,
Utilizator, Photoid} = Action.Payload;
const noustate = json.parse (
Json.Stringfy (stat));
const foto = newstate.find (
photo = & gt; photo.id === Photoid);
photo.comments.push ({{
ID, comentariu, stânga, top, utilizator
});
returnați nou-născut; 

21. Ascundeți alte comentarii

În cele din urmă, dacă un alt comentariu este deschis și utilizatorul dorește să adauge un nou comentariu, UI devine prea aglomerat. Ar trebui să ascundem caseta de comentarii dacă este compus un nou comentariu. Putem conecta în existent Add_new_comment acțiune pentru a șterge Commen valoare. Se îndoi Reductor / UI / UI.js și adăugați un caz pentru asta.

 caz add_new_comment:
întoarcere {
...stat,
Commentați: Nedefined.
}; 

Acest articol a fost publicat inițial în numărul 283 din revista Creative Web Design Web designer . Cumpărați problema 283 aici sau Aboneaza-te la designerul web aici .

Articole similare:

• 5 API-uri JavaScript minunate
• Dezvoltați componente reacționate reutilizabile
• 9 dintre cele mai bune cadre JavaScript