Kom i gang med Redux Thunk

Status er en stor del af en reaktionsapplikation, hvorfor Redux almindeligvis er parret med det. Disse data kommer ofte fra en database, som kræver en anmodning og et svar. For nogle applikationer kan denne kommunikation være konstant. Det kan være vanskeligt at forsøge at klare udelukkende inden for reagerkomponenter.

Dette introducerer også nogle nye problemer - hvad sker der, hvis den laster langsomt, eller slet ikke indlæses? Hver komponent, der beskæftiger sig med asynkron data, skal indeholde logik til at håndtere disse scenarier.

En 'thunk' er et koncept, der kan hjælpe med denne situation. Hvert tømmer er en funktion, der returnerer en anden funktion. Denne funktion kan derefter kaldes på et senere tidspunkt, ligesom en tilbagekald. Hvis vi kunne sende en tyndt i stedet for et handlingsobjekt, kan vi tilføje i nogle ekstra logik i reaktion på en anden begivenhed.

Redux Thunk er et bibliotek, der sidder imellem afsendte handlinger og reduceren. Når det ser en tømmer afsendes, passerer den nogle metoder til den returnerede funktion, der kan bruges til at sende yderligere handlinger, som en succes eller en fejlhændelse.

• 20 brilliant jquery plugins

I denne vejledning vil vi gøre brug af thrunks til at hjælpe med at trække i data fra en server i stedet for fra en JSON-fil, der arbejder med PhotosHare. - En foto-kommentar applikation, der drives af Redux.

Fik et nyt webstedsprojekt, men har brug for det til at blive simpelt? Her er vores guider til det bedste Website Builder. og Web Hosting. service. Deling af filer med andre? Få din Sky lagring ret.

Download filerne for denne vejledning.

01. Installer afhængigheder

Der er to dele til dette projekt - det forreste slutsted og den bageste ende server det kører på. Mens vejledningen fokuserer på forsiden, har vi brug for en server, der kører for at hente billederne. Download projektfilerne og installer afhængighederne for både webstedet og serveren. Kør serverne til både og lad dem køre i baggrunden.

 / * En terminal inde / site * /
& gt; garn.
& gt; Garn Start.
/ * En terminal inde / server * /
& gt; garn.
& gt; Garn Start 

02. Indstil middleware

Redux Thunk er en middleware. - Funktionalitet, der sidder mellem handlinger og reduktionsmidler, der kan ændre, hvordan disse handlinger opfører sig. Redux understøtter flere sæt mellemmidler, der dækker hele applikationen. De bliver tilføjet, når butikken er oprettet ved hjælp af komponere metode. Tilføj middleware til CreativeStore. Metode inden for Index.js.

 Import {applymiddleware, compose}
fra "Redux";
importere tømmer fra "Redux-thunk";
[...]
CONST STORE = CREATESTESTORE (
rootreducer,
komponere (
applymiddleware (tømmer),
devtools.
)
); 

03. Opsæt Action Creators

Det første, vi skal gøre nu, er at indlæse billederne i galleriet. Som regelmæssige handlinger har vi brug for handlingsskabere for de forskellige tilstande, at et asynkronopkald vil tage. De fleste vil have Start Vi succes og fejl handlinger. Disse lader Redux vide, hvad JavaScript er travlt med at gøre. Inden for Handlinger / Billeder / Billeder.js , oprette tre actionskabere for disse forskellige stater.

 Eksport Const loadgalleryStart = () = & gt; ({
Type: load_gallery_start});
Eksporter const loadgallerySuccess =
Billeder = & gt; ({
Type: load_gallery_Success,
fotos.
});
Eksporter Const loadgalleryError = () = & gt; ({
Type: load_gallery_error}); 

04. Opret en tømmer til lastning

Thunks arbejder nøjagtigt det samme som handlings skabere. Vi sender stadig returværdien, men denne gang returnerer den en funktion i stedet for et objekt. Middleware, vi etablerede tidligere, vil passere en forsendelsesmetode i den returnerede funktion. Dette gør det muligt for os at sende flere handlinger til redux efter den indledende afsendelse. Lave en loadgallery. metode, der returnerer en funktion. For nu har det sendt en handling for at vise, at galleriet stadig lægger lastet.

 Eksport Const loadgallery = () = & gt;
Dispatch = & GT; {
Dispatch (loadgalleryStart ());
}; 

05. Læg data fra serveren

Vi er nu klar til at begynde at hente fra den server, vi opretter i begyndelsen. Vi kan gøre dette ved at bruge Axios. - En pakke designet til at arbejde med løfter på tværs af forskellige browsere. Importere Axios. og lav en anmodning om billederne indenfor loadgallery. . Hvis løftet løser, skal du sende succeshandlingen, og hvis du ikke sender fejlen. Med det er strukturen af ​​tømmeret afsluttet.

 Import Axios fra "Axios";
[...]
returnere Axios.
.get ("http: // localhost: 3001 / fotos")
.then (svar = & gt; dispatch (
loadgallerySuccess (Response.Data)))
.catch (() = & gt; dispatch (
loadgalleryError ())); 

06. Dispatch the Thunk

Det tømmer ikke vil gøre noget, før det er blevet afsendt. Vi kan gøre det inden for en reaktionskomponent som enhver anden handling. En god tid til at begynde at indlæse billederne er, når brugeren ser hovedgalleriet. Vi kan bruge reagerer ComponentDidMount. Livscyklusmetode som en trigger, efter at have kontrolleret galleriet, er ikke allerede indlæst. Inden for Komponenter / Container / Galleri / Gallery.js Dispatch A. loadgallery. handling ved at tilføje det til mapdispatchtophops. og kalder det indenfor ComponentDidMount. .

 Componentdidmount () {
hvis (! this.props.photosloaded) {
this.props.loadgallery ();
}
}
Eksporter const mapdispatchtoprops =
 Dispatch = & GT; ({
loadgallery: () = & gt;
Dispatch (loadgallery ()),
}); 

07. Tilføj billeder om succes

Når billederne kommer tilbage fra serveren, sender vi en Load_gallery_success. handling med billederne. Vi er nødt til at få det til staten gennem fotos. reducer. Hoved til Reducers / fotos / billeder.js og tilføj en sag for succeshandlingen. Betalingsbelastningen indeholder alle billederne som en matrix. Når staten opdateres, sender fotovælgeren billederne gennem til galleri-komponenten, der skal vises.

 Case load_gallery_Success:
returnere handling. Photos; 

08. Sæt UI op

I øjeblikket vises billederne pludselig efter at de er indlæst. På en langsommere forbindelse ser brugeren på en blank skærm, indtil anmodningen afslutter, hvis den nogensinde gør det. De handlinger, vi sender for at indlæse billeder, kan også afhentes i UI-reduceren for at holde grænsefladen opdateret med hvad der sker. Opdater indlæsnings- og fejlflaggene i UI-reduceren på reducere / ui / ui.js .

 Case load_gallery_Error:
returnere {... stat,
Indlæser: FALSE, FEJL: TRUE};
Case loads_gallery_start:
returnere {... stat,
Indlæsning: True, Fejl: FALSE};
Case load_gallery_success:
returnere {... stat,
Indlæser: FALSE}; 

09. Tilføj loading og fejlvælger

Som med gallerierne selv har vi brug for selektorer for at få de forskellige UI-stater værdier ud af Redux. Vi kan videregive disse til galleriet, som derefter vil gøre forskellige elementer, hvis en af ​​en er sandt. I SELECTORS / UI / UI.JS , tilføj et par funktioner for at få værdierne ud.

 Eksport Const Isgalleryerrored =
 tilstand = & gt; State.ui.Error;
Eksport Const IsgalleryLoading =
 tilstand = & gt; state.ui.loading; 

10. Tilføj data til GalleryContainer

Med vælgerne klar, kan de nu tilføjes til Galleri beholderkomponent. Tilføjelse af dem her betyder, at den komponent, der er ansvarlig for at vise galleriet, ikke behøver at vide om, hvordan dataene er ankommet. Hoved til Container / Gallery / Gallery.js og tilføj vælgerne til mapstatetoprops. . Gør konstanter til værdierne for at hjælpe med at vise staten i næste trin.

 Const {Fejl, loading,
 fotos} = this.props;
[...]
Eksporter const mapstatetoprops =
 tilstand = & gt; ({
FEJL: ISGALERYERRORED (STAT),
Indlæsning: IsgalleryLoading (tilstand),
 }); 

11. Vis indlæsning og fejltilstand

Mens vi har fejlen og loading rekvisitter, er der i øjeblikket ingen brugergrænseflade til at angive, hvornår de er aktive. Disse rekvisitter er boolske værdier, hvilket betyder, at vi kan skifte visning af komponenter, når de er sande. Opdater Render-metoden for at sikre, at & lt; fejl & gt; og & lt; loading & gt; Komponenter gør i stedet for galleriet, når det er nødvendigt.

 hvis (fejl) {
Retur & lt; fejl / & gt ;;
}
hvis (loading) {
returnerer / loading / & gt ;;
} 

12. Hent galleriet igen

Med galleriet indlæst, kan vi gå videre til et individuelt foto. Hvis du klikker på nogen af ​​fotos og forfriskning af siden, indlæser billedet op, da der ikke er nogen instruktion på denne side endnu for at indlæse galleriet. Åben Container / Foto / Photo.js og læg galleriet i ComponentDidMount. som i Galleri komponent. Det fotosloaded. Check vil ikke forsøge at indlæse billederne igen, hvis de allerede var indlæst i galleriet.

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

13. Tilføj en ny kommentar

Brugeren kan klikke på billedet, hvor de vil efterlade en kommentar. Foto-præsentationskomponenten vil køre addnewcomment. PROP-funktion, når dette sker. Inde i addnewcomment. Funktion, beregne det punkt, hvor brugeren har klikket på i billedet. Serveren kræver en rund heltal procentværdi, når den bliver gemt.

 CONST PHOTO = E.TARGET
 .getboundingclientrect ();
const top = e.clientx - photo.left;
const left = e.clienty - photo.top;
const toppc = math.round ((top /
 foto.width) * 100);
const leftpc = math.round ((venstre /
 Photo.Height) * 100); 

14. Fortæl Redux om kommentaren

Med den beregnede position skal vi fortælle Redux om kommentaren, så det kan vise kommentarformularen. Der er allerede en handling, der er oprettet for at tilføje den nye kommentar på skærmen. Tilføje addnewcomment. ind i mapdispatchtophops. og ring det, efter at vi har beregnet klikets position.

 this.props.addnewcomment (
 toppc, venstrepc);
[...]
Eksporter const mapdispatchtoprops =
 Dispatch = & GT; ({
Addnewcomment: (top, venstre) = & gt;
Dispatch (addnewcomment (top, venstre)),
});

15. Fortæl billedet om ny kommentar

Når nye kommentaroplysninger overføres til Redux, skal vi videregive det i billedpræsentationskomponenten. Dette gør det muligt at vise formularen i den position. Find getNewcomment. vælger, tilføj det til mapstatetoprops. og passere propen i & lt; foto & gt; .

 Eksporter const mapstatetoprops =
 (stat, rekvisitter) = & gt; ({
NEWCOMMENT: GETNEWOMMENT (STAT),
});
& lt; foto [...] newcomment = {
 this.props.newcomment} / & gt; 

16. Ring tømmer i kommentar

Ved at klikke på billedet vises nu den nye kommentarformular. Dette er dens egen tilsluttede komponent. Når formularen er indsendt, kalder den en Tilføj kommentar prop funktion og bliver bestået. Dette er en tømmer, vi vil lave. Åben op Container / Newcomment / Newcomment.js og tilføj tømmeret til mapdispatchtophops. . Passere, at prop i den gengivne præsentationskomponent.

 & lt; newcomment [...]
 indsende = {indsending} / & gt;
Eksporter const mapdispatchtoprops =
 Dispatch = & GT; ({
Indsendelse: Kommentar = & GT; Dispatch (
indsende (kommentar))
});

17. Saml indhold til tømmer

Det tømmer at tilføje en ny kommentar har en lignende struktur til hentningen af ​​galleriet, herunder en start, succes og fejl handling. Der er et ekstra argument, der er gået ind i denne tømmer - den getstate. fungere. Dette muliggør direkte adgang til den aktuelle tilstand for at få fat i data fra den. Opret Tilføj kommentar thunk in. Handlinger / Newcomment / Newcomment.js . Hver kommentar er forbundet med et foto og en bruger. Til denne vejledning er bruger-id'et hårdt kodet i bruger reducer.

 Eksport Const IndsendComment = Kommentar
 = & gt; (Dispatch, getstate) = & gt; {
Dispatch (indsendeCommentStart ());
const currentphotoid =
getcurrentphotoid (getstate ());
const bruger =
getcurrentuser (getstate ());
const {venstre, top} =
GetNewomment (getstate ());
}; 

18. Skriv anmodningen

Med alle de nødvendige data på plads kan vi indsende kommentaren. Axios har A. stolpe metode til at håndtere STOLPE anmodninger om, at det andet argument er de data, der skal sendes i denne anmodning. Tilføj anmodningen til tømmeret, passerer data i Snake Case for at matche, hvad serveren forventer.

 Return Axios
.stolpe(
"http: // localhost: 3001 / kommentarer", {
USER_ID: USER.ID,
Photo_ID: AktuelPhotoid,
kommentar,
venstre,
top
}) 

19. Håndter succes og fejl

Hvis løftet fra Axios løser eller afviser, skal vi fortælle ansøgningen om det. Hvis det løser succesfuldt, vil serveren passere indholdet af kommentaren. Vi bør passere det med succeshandlingen. Hvis det bliver afvist, brand en fejl handling. Opdater løftet med derefter og fangst blokke.

 .then (({data: {
 id, kommentar, venstre, top}}) = & gt;
Dispatch (
IndsendCommentSuccess (
id, kommentar, venstre, top,
Bruger, AktuelPhotoid)
)
)
.catch (() = & gt; dispatch (
 indsendeCommentError ())); 

20. Tilføj kommentar til foto

Lige nu, når kommentaren er tilføjet, bliver den ryddet fra skærmen, men er ikke synlig, indtil siden opdateres. Vi kan opdatere fotosreduceren for at afhente den nye kommentar og tilføje den til sine kommentarer array, for at vise som resten af ​​dem. Åbn Reducer / Photos / Photos.js og tilføj en sag for at håndtere handlingen. Opret en kopi af staten for at sikre, at vi ikke ved et uheld muterer den eksisterende tilstand.

 CASE SUBMIT_COMMENT_SUCCESS:
const {id, kommentar, top, venstre,
bruger, fotoid} = action.payload;
const newstate = json.parse (
Json.Stringify (stat));
const foto = newstate.find (
foto = & gt; photo.id === fotoid);
Photo.comDS.push ({
id, kommentar, venstre, top, bruger
});
returnere NewState; 

21. Skjul andre kommentarer

Endelig, hvis en anden kommentar er åben, og brugeren ønsker at tilføje en ny kommentar, bliver UI for rodet. Vi skal skjule kommentarboksen, hvis en ny kommentar er sammensat. Vi kan kroge ind i det eksisterende Add_new_comment. handling for at rydde kommentaropen værdi. Hoved til reducer / ui / ui.js og tilføj en sag for det.

 CASE ADD_NEW_COMMENT:
Vend tilbage {
...stat,
Kommentar: Udefineret
}; 

Denne artikel blev oprindeligt offentliggjort i udstedelse 283 af Creative Web Design Magazine Webdesigner . Køb problem 283 her eller Abonner på Web Designer her .

Relaterede artikler:

• 5 Awesome JavaScript Apis
• Udvikle genanvendelige reagerkomponenter
• 9 af de bedste JavaScript-rammer