Kom i gang med Redux Thunk

Staten er en stor del av et reaktprogram, og derfor er Redux ofte parret med det. Disse dataene kommer ofte fra en database, som krever en forespørsel og et svar. For noen applikasjoner kan denne kommunikasjonen være konstant. Det kan være vanskelig å forsøke å klare seg utelukkende innenfor reaktkomponenter.

Dette introduserer også noen nye problemer - hva skjer hvis det laster sakte, eller belastes ikke i det hele tatt? Hver komponent som omhandler asynkrone data, må inneholde logikk for å håndtere disse scenariene.

En "Thunk" er et konsept som kan hjelpe med denne situasjonen. Hver thunk er en funksjon som returnerer en annen funksjon. Denne funksjonen kan da kalles på et senere tidspunkt, som en tilbakeringing. Hvis vi kunne sende en thunk i stedet for et handlingsobjekt, kan vi legge til litt ekstra logikk i reaksjon på en annen hendelse.

Redux Thunk er et bibliotek som sitter i mellom disponerte handlinger og reduksjonsmiddelet. Når det ser en thunk er sendt, passerer den noen metoder i den returnerte funksjonen som kan brukes til å sende ytterligere handlinger, som en suksess eller en feilhendelse.

• 20 briljante jquery plugins

I denne opplæringen vil vi benytte seg av thunks for å trekke i dataene fra en server i stedet for fra en JSON-fil, som arbeider med Photoshare. - En fotomagent søknad drevet av Redux.

Fikk et nytt nettstedprosjekt, men trenger det å være enkelt? Her er våre guider til det beste Nettstedbygger og Web Hosting. service. Deling av filer med andre? Få din skylagring Ikke sant.

Last ned filene for denne opplæringen.

01. Installer avhengigheter

Det er to deler til dette prosjektet - den forreste delen og bakenden den kjører på. Mens opplæringen fokuserer på frontenden, trenger vi en server som kjører for å hente bildene. Last ned prosjektfilene og installer avhengighetene for både nettstedet og serveren. Kjør serverne for både og la dem løpe i bakgrunnen.

 / * One Terminal Inside / Site * /
& gt; garn
& gt; garn start
/ * One Terminal Inside / Server * /
& gt; garn
& gt; Garn Start 

02. Sett opp mellomvare

Redux Thunk er en middleware. - Funksjonalitet som sitter mellom handlinger og reduksjonsmidler som kan endre hvordan disse handlingene oppfører seg. Redux støtter flere sett med mellomvarer som dekker hele applikasjonen. De blir lagt til når butikken er opprettet ved hjelp av komponere metode. Legg til middleware til createstore. Metode i Index.js.

 Importer {applyMiddleware, komponere}
fra "redux";
importere thunk fra "Redux-Thunk";
[...]
constbutikk = createstore (
rootreducer,
komponere (
applyDidsware (Thunk),
DevTools.
)
); 

03. Sett opp handlingsskapere

Det første vi må gjøre nå er å laste bildene i galleriet. Som vanlige handlinger trenger vi handlingsskapere for de ulike statene som en asynkron samtale vil ta. De fleste vil ha start , suksess og feil handlinger. Disse la redux vite hva JavaScript er opptatt med å gjøre. Innenfor Handlinger / Bilder / Foto.js , Sett opp tre handlingsskapere for disse forskjellige statene.

 Eksporter Const LoadGalleryStart = () = & gt; ({
Type: load_gallery_start});
Eksporter Const LoadGallerySuccess =
Bilder = & gt; ({
Type: load_gallery_success,
Bilder
});
Eksporter Const LoadGalleryError = () = & gt; ({
Type: load_gallery_error}); 

04. Lag en thunk for lasting

Thunks jobber nøyaktig det samme som handlingsskapere. Vi sender fortsatt returverdien, men denne gangen returnerer den en funksjon i stedet for et objekt. Middelvaren som vi konfigurerer tidligere, vil passere en forsendelsesmetode i den returnerte funksjonen. Dette gjør det mulig for oss å sende flere handlinger til Redux etter den første forsendelsen. Lage en loadgallery metode som returnerer en funksjon. For nå, må det sende en handling for å vise at galleriet fortsatt lastes inn.

 Eksporter const loadgallery = () = & gt;
Dispatch = & GT; {
forsendelse (loadgalleryStart ());
}; 

05. Legg inn data fra serveren

Vi er nå klare til å begynne å hente fra serveren vi satt opp i begynnelsen. Vi kan gjøre dette ved å bruke Axios - En pakke designet for å jobbe med løfter på tvers av forskjellige nettlesere. Import Axios og gjør en forespørsel om bildene i loadgallery . Hvis løftet løser, sender du suksessvirkningen, og hvis ikke send feilen. Med det er thunks struktur fullført.

 import aksios fra "aksios";
[...]
returnere aksios
.get ("http: // localhost: 3001 / photos")
.Then (response = & gt; forsendelse (
loadgallerySuccess (response.data)))
.Catch (() = & gt; forsendelse (
loadgalleryError ())); 

06. Dispatch thunk

Thunk vil ikke gjøre noe før det er blitt sendt. Vi kan gjøre det innenfor en reagert komponent som enhver annen handling. En god tid å begynne å laste inn bildene er når brukeren ser på hovedgalleriet. Vi kan bruke reagere komponentdidmount. Lifecycle Method som en utløser, etter å ha sjekket galleriet, er ikke allerede lastet. Innenfor Komponenter / beholder / galleri / galleri.js Dispatch A. loadgallery handling ved å legge den til MapDispatchtoprops. og kaller det innenfor komponentdidmount. .

 komponentdidmount () {
hvis (! this.props.photosloaded) {
this.props.loadgallery ();
}
}
Eksporter Const MapDispatchtoprops =
 Dispatch = & GT; ({
loadgallery: () = & gt;
Dispatch (loadgallery ()),
}); 

07. Legg til bilder på suksess

Når bildene kommer tilbake fra serveren, sender vi en Load_gallery_success. handling med bildene. Vi må få dette inn i staten gjennom Bilder reduksjonsgiver. Setter kursen mot Reducers / Photos / Photos.js og legg til en sak for suksessen. Lastbelastningen inneholder alle bildene som en matrise. Når staten er oppdatert, passerer fotovelgeren bildene til Galleri-komponenten som skal vises.

 case load_gallery_success:
returnere action.photos; 

08. Sett opp brukeren

For tiden vises bildene plutselig etter at de er lastet. På en langsommere tilkobling vil brukeren se på en tom skjerm til forespørselen er ferdig, hvis det noen gang gjør det. Handlingene vi sender for å laste bilder, kan også hentes i UI-reduksjonen for å holde grensesnittet oppdatert med hva som skjer. Oppdater lastings- og feilflaggene i UI-reduksjonen på Reducers / ui / ui.js .

 case load_gallery_error:
returnere {... staten,
LOADING: FALSK, FEIL: SANT};
Case load_gallery_start:
returnere {... staten,
Lasting: True, Feil: False};
Case load_gallery_success:
returnere {... staten,
Laster: False}; 

09. Legg til lasting og feilvelger

Som med Galleri-bildene selv, trenger vi selektorer for å få de ulike UI-statene verdiene ut av Redux. Vi kan passere disse til galleriet, som vil gjøre forskjellige elementer hvis ene er sant. I selektorer / ui / ui.js , legg til et par funksjoner for å få verdiene ut.

 Eksporter const isgalleryErrored =
 Stat = & gt; State.ui.Error;
Eksporter const isgalleryloading =
 Stat = & gt; State.ui.loading; 

10. Legg til data i GalleryContainer

Med selektorene klar, kan de nå legges til Galleri containerkomponent. Legge til dem her betyr at komponenten som er ansvarlig for å vise galleriet, ikke trenger å vite om hvordan dataene er kommet. Setter kursen mot container / galleri / galleri.js og legg til selektørene til MapStatetoprops. . Lag konstanter for verdiene for å vise staten i neste trinn.

 const {feil, lasting,
 Bilder} = this.props;
[...]
Eksporter Const MapStatetoprops =
 Stat = & gt; ({
Feil: IsgalleryErrored (stat),
Laster: Isgalleryloading (stat),
 }); 

11. Vis lasting og feiltilstand

Mens vi har feilen og laster rekvisitter, er det for tiden ingen brukergrensesnitt for å indikere når de er aktive. Disse rekvisitter er boolske verdier, noe som betyr at vi kan bytte visning av komponenter når de er sanne. Oppdater gjengivelsesmetoden for å sikre at & lt; error & gt; og & lt; loading & gt; Komponenter gjør i stedet for galleriet når det er nødvendig.

 Hvis (feil) {
returnere & lt; feil / & gt ;;
}
hvis (lasting) {
returnere & lt; lasting / & gt ;;
} 

12. Hent galleriet igjen

Med galleriet lastet, kan vi gå videre til et individuelt bilde. Ved å klikke på noen av bildene og forfriskning av siden Legger ikke bildet på bildet, da det ikke er noen instruksjon på denne siden, for å laste galleriet. Åpen Beholder / foto / foto.js og last galleriet i komponentdidmount. som i den Galleri komponent. De photosloaded. Sjekk vil ikke prøve å laste bildene igjen hvis de allerede var lastet i galleriet.

 Hvis (! This.props.Photosloaded) {
this.props.loadgallery ();
} 

13. Legg til en ny kommentar

Brukeren kan klikke på bildet der de vil legge igjen en kommentar. Foto presentasjonskomponenten vil kjøre AddNewcomment. PROP Funksjon når dette skjer. Inne i AddNewcomment. Funksjon, beregne punktet der brukeren har klikket på bildet. Serveren krever en rund heltall prosentandel verdi når den blir lagret.

 const photo = e.target
 .getboundingClientrect ();
const top = e.clientx - photo.left;
const venstre = e.clienty - photo.top;
CONT TOPPC = MATH.ROUND ((TOP /
 photo.width) * 100);
cond leftpc = matematikk.Round ((venstre /
 Photo.Height) * 100); 

14. Fortell Redux om kommentaren

Med den beregnede posisjonen må vi da fortelle Redux om kommentaren, slik at den kan vise kommentarskjemaet. Det er allerede en handling satt opp for å legge til den nye kommentaren på skjermen. Legg til AddNewcomment. inn i MapDispatchtoprops. og ring det etter at vi har beregnet posisjonen til klikket.

 this.props.addnewcomment (
 Toppc, leftpc);
[...]
Eksporter Const MapDispatchtoprops =
 Dispatch = & GT; ({
AddNewcomment: (topp, venstre) = & gt;
Dispatch (AddNewcomment (Top, Venstre)),
});

15. Fortell bilde om ny kommentar

Når ny kommentarinformasjon er sendt til Redux, må vi passere den til PHOTO Presentasjonskomponenten. Dette gjør det mulig å vise skjemaet på den posisjonen. Finn GetNewcomment. velger, legg den til MapStatetoprops. og passere prop i & lt; photo & gt; .

 Eksporter Const MapStatetoprops =
 (stat, rekvisitter) = & gt; ({
Nycomment: GetNewcomment (stat),
});
& lt; photo [...] nykomment = {
 this.props.newcomment} / & gt; 

16. Ring thunk i kommentar

Hvis du klikker på bildet, vil du få opp den nye kommentarskjemaet. Dette er sin egen tilkoblede komponent. Når skjemaet er sendt, kaller det en Legg inn kommentar propfunksjon og blir bestått. Dette er en thunk som vi vil gjøre. Åpne opp container / nykomment / nykomment.js og legg til thunken til MapDispatchtoprops. . Passere den prop i den gjengitte presentasjonskomponenten.

 & lt; nykomment [...]
 innlevering = {innsending} / & gt;
Eksporter Const MapDispatchtoprops =
 Dispatch = & GT; ({
Innlevering: Kommentar = & GT; forsendelse (
innlevering (kommentar))
});

17. Samle innhold for thunk

THUNK å legge til en ny kommentar har en lignende struktur til henting av galleriet, inkludert en start-, suksess- og feilhandlinger. Det er et ekstra argument som passerte i denne thunk - getstate. funksjon. Dette gjør det mulig å få direkte tilgang til gjeldende tilstand for å få tak i data fra det. Skape den Legg inn kommentar thunk i handlinger / nykomment / nykomment.js . Hver kommentar er knyttet til et bilde og en bruker. For denne opplæringen er bruker-IDen hardkodet i bruker reduksjonsgiver.

 Eksporter Const SendComment = Kommentar
 = & gt; (Dispatch, GetState) = & GT; {
forsendelse (SubmitcommentStart ());
cond currenthotoid =.
getcurrentphotoid (getstate ());
const bruker =.
getcurrentuser (getstate ());
const {venstre, topp} =
getnewcomment (getstate ());
}; 

18. Legg inn forespørselen

Med alle nødvendige data på plass, kan vi sende inn kommentaren. Axios har A. post metode for å håndtere POST forespørsler, med det andre argumentet som dataene for å sende inn den forespørselen. Legg til forespørselen til thunk, passerer i data i Snake Case for å matche hva serveren forventer.

 returnere aksios
.post(
"http: // localhost: 3001 / kommentarer", {
user_id: user.id,
Photo_ID: Nåværende parthotoid,
kommentar,
venstre,
topp
}) 

19. Håndter suksess og feil

Hvis løftet fra Axios løser eller avviser, må vi fortelle søknaden om det. Hvis den løser vellykket, vil serveren sende tilbake innholdet i kommentaren. Vi bør passere det med suksessen. Hvis det blir avvist, brann en feilhandling. Oppdater løftet med deretter og å fange blokker.

 .Den (({data: {
 ID, kommentar, venstre, topp}}) = & gt;
forsendelse (
InnleveringCommentuccess (
ID, kommentar, venstre, topp,
Bruker, nåværende parthotoid)
)
)
.Catch (() = & gt; forsendelse (
 sublechcomamentError ())); 

20. Legg til kommentar til bilde

Akkurat nå, når kommentaren er lagt til vellykket, blir den ryddet fra skjermen, men er ikke synlig til siden oppdateres. Vi kan oppdatere bildene Reducer for å hente den nye kommentaren og legge den til i kommentaren, for å vise som resten av dem. Åpne Reducer / Photos / Photos.js og legg til et tilfelle for å håndtere handlingen. Lag en kopi av staten for å sikre at vi ikke ved et uhell muterer den eksisterende tilstanden ved et uhell.

 Case Submit_Comment_Success:
const {ID, kommentar, topp, venstre,
bruker, fotoid} = action.PaiLoad;
const newstate = json.parse (
Json.stringify (stat));
const photo = newstate.find (
bilde = & gt; photo.id === fotoid);
Photo.comMessions.Push ({
ID, kommentar, venstre, topp, bruker
});
Return Newstate; 

21. Skjul andre kommentarer

Til slutt, hvis en annen kommentar er åpen og brukeren ønsker å legge til en ny kommentar, blir brukergrensesnittet for rotete. Vi bør skjule kommentarboksen hvis en ny kommentar blir sammensatt. Vi kan hekte inn i eksisterende Add_new_comment. handling for å rydde kommentar verdi. Setter kursen mot Reducer / ui / ui.js og legg til et tilfelle for det.

 case add_new_comment:
komme tilbake {
...stat,
kommentar: undefined.
}; 

Denne artikkelen ble opprinnelig publisert i utgave 283 av Creative Web Design Magazine Webdesigner . Kjøp problem 283 her eller Abonner på webdesigner her .

Relaterte artikler:

• 5 Awesome JavaScript APIer
• Utvikle gjenbrukbare reaktkomponenter
• 9 av de beste JavaScript-rammene