Kom igång med Redux Thunk

Staten är en stor del av en reaktionsansökan, varför Redux är vanligtvis parat med den. Dessa data kommer ofta från en databas, vilket kräver en begäran och ett svar. För vissa applikationer kan denna kommunikation vara konstant. Det kan vara knepigt att försöka hantera enbart inom reaktionskomponenter.

Detta introducerar också några nya problem - vad händer om det laddas långsamt, eller laddas inte alls? Varje komponent som handlar om asynkron data måste innehålla logik för att hantera dessa scenarier.

En "Thunk" är ett koncept som kan hjälpa till med denna situation. Varje thunk är en funktion som returnerar en annan funktion. Den funktionen kan då kallas vid en senare punkt, som en återuppringning. Om vi ​​kunde skicka en thunk istället för ett åtgärdsobjekt, kan vi lägga till någon extra logik i reaktion på en annan händelse.

Redux Thunk är ett bibliotek som sitter mellan skickade åtgärder och reduceraren. När det ser en thunk sänds, passerar den några metoder i den returnerade funktionen som kan användas för att skicka ytterligare åtgärder, som en framgång eller felhändelse.

• 20 briljanta jquery plugins

I den här handledningen kommer vi att använda Thunks för att hjälpa till att dra i data från en server snarare än från en JSON-fil, som arbetar med Photoshare - Ett foto-kommentarprogram som drivs av Redux.

Har du ett nytt sajtprojekt, men behöver det vara enkelt? Här är våra guider till det bästa Website Builder och webbhotell service. Dela filer med andra? Få din molnlagring rätt.

Ladda ner filerna för denna handledning.

01. Installera beroenden

Det finns två delar till det här projektet - den främre ändplatsen och den bakre änden som den körs på. Medan handledningen fokuserar på den främre änden behöver vi en server som kör för att hämta bilderna. Ladda ner projektfilerna och installera beroenden för både webbplatsen och servern. Kör servrarna för båda och låt dem springa i bakgrunden.

 / * En terminal inuti / plats * /
& gt; garn
& gt; garnstart
/ * En terminal inuti / server * /
& gt; garn
& gt; Garnstart 

02. Ställ in middleware

Redux Thunk är en middleware - Funktionalitet som sitter mellan handlingar och reducerare som kan ändra hur dessa åtgärder beter sig. Redux stöder flera uppsättningar middleware som täcker hela applikationen. De läggs till när butiken är skapad med hjälp av komponera metod. Lägg till middleware till skapelse Metod inom index.js.

 Import {ApplyMiddleware, Compose}
från "Redux";
Importera thunk från "Redux-Thunk";
[...]
Const Store = CreetaStor (
rootreducer,
komponera(
ApplyMiddleware (Thunk),
devtools
)
); 

03. Ställ in actionskapare

Det första vi behöver göra nu är att ladda bilderna i galleriet. Liksom regelbundna handlingar behöver vi actionskapare för de olika staterna som ett asynkront samtal tar. De flesta kommer att ha Start , Framgång och fel åtgärder. Dessa låt Redux vet vad JavaScript är upptagen med att göra. Inom Aktiviteter / Foton / photos.js , inrätta tre actionskapare för dessa olika stater.

 Export Const LoadGalleryStart = () = & GT; ({
Typ: load_gallery_start});
Export Const Loadgallerysuccess =
Foton = & gt; ({
Typ: load_gallery_success,
Foton
});
Export Const LoadgalleryError = () = & GT; ({
Typ: load_gallery_error}); 

04. Skapa en thunk för lastning

Thunks arbetar exakt samma som handlingsskapare. Vi skickar fortfarande returvärdet, men den här gången returnerar den en funktion istället för ett objekt. Middleware som vi satt upp tidigare kommer att skicka en avsändningsmetod i den returnerade funktionen. Detta gör det möjligt för oss att skicka fler åtgärder till Redux efter den ursprungliga avsändningen. Skapa en loadgallery Metod som returnerar en funktion. För närvarande har det skickat en åtgärd för att visa att galleriet fortfarande laddas.

 Export Const Loadgallery = () = & GT;
Dispatch = & gt; {
Dispatch (loadgallerystart ());
}; 

05. Ladda data från servern

Vi är nu redo att börja hämta från servern vi satt upp i början. Vi kan göra det genom att använda axios - Ett paket som är utformat för att fungera med löften över olika webbläsare. Importera axios och gör en begäran om bilderna inom loadgallery . Om löftet löser, skicka framgångsåtgärden, och om inte skicka felåtgärden. Med det är strukturen av thunk komplett.

 Importera axios från "Axios";
[...]
retursaxios
.get ("http: // localhost: 3001 / foton")
.Then (svar = & gt; sändning (
loadgallerysuccess (svar.data)))
.Catch (() = & GT; Dispatch (
loadgalleryError ())); 

06. Skicka dunk

Thunk kommer inte göra någonting förrän det har skickats. Vi kan göra det inom en reaktionskomponent som alla andra åtgärder. Det är bra att börja ladda bilderna är när användaren visar huvudgalleriet. Vi kan använda Reages komponentdidmontage Livscykelmetod som en utlösare, efter att ha kontrollerat galleriet är inte redan laddat. Inom Komponenter / Container / Galleri / Gallery.js sändning a loadgallery åtgärd genom att lägga till den till Mapdispatchtoprops och ringer det inom komponentdidmontage .

 ComponentDidmount () {
om (! this.props.photosloaded) {
this.props.loadgallery ();
}
}
Export Const MapDispatchToprops =
 Dispatch = & gt; ({
LoadGallery: () = & gt;
Dispatch (LoadGallery ()),
}); 

07. Lägg till bilder på framgång

När bilderna kommer tillbaka från servern skickar vi en Load_gallery_success åtgärd med bilderna. Vi måste få det här i staten genom Foton reducerare. Bege dig till reducers / photos / photos.js och lägg till ett fall för framgångsåtgärden. Lastlasten innehåller alla foton som en array. När staten är uppdaterad, skickar bildväljaren bilderna till den bild som ska visas.

 Case load_gallery_success:
retur action.photos; 

08. Ställ in UI

För närvarande visas bilderna plötsligt efter att de är laddade. På en långsammare anslutning kommer användaren att titta på en tom skärm tills begäran slutar, om den någonsin gör det. De åtgärder vi skickar för att ladda foton kan också hämtas i UI-reduceraren för att hålla gränssnittet uppdaterat med vad som händer. Uppdatera lastnings- och felflaggorna i UI-reduceraren på reducers / ui / ui.js .

 Case load_gallery_error:
återvända {... stat,
Laddar: FALSK, FEL: SANT};
Case load_gallery_start:
återvända {... stat,
Laddar: sant, fel: false};
Case load_gallery_success:
återvända {... stat,
Laddar: False}; 

09. Lägg till lastning och felväljare

Som med gallerierna själva behöver vi väljare för att få de olika UI-staterna värden från Redux. Vi kan skicka dessa till galleriet, vilket då kommer att göra olika element om någon är sant. I selectors / ui / ui.js , lägg till ett par funktioner för att få värdena ut.

 Export Const ISGalleryErrored =
 State = & gt; state.ui.error;
Export Const ISGalleryLoading =
 State = & gt; state.ui.loading; 

10. Lägg till data till GalleryContainer

Med de selektorerna redo kan de nu läggas till Galleri Containerkomponent. Att lägga till dem här betyder att den komponent som är ansvarig för att visa galleriet inte behöver veta om hur data har kommit fram. Bege dig till Container / galleri / galleri.js och lägg till selektorerna till MapStatetoprops . Gör konstanter för värdena som hjälper till att visa staten i nästa steg.

 const {fel, ladda,
 Bilder} = this.props;
[...]
Export Const MapStatetoprops =
 State = & gt; ({
Fel: isgalleryErrored (state),
Laddar: isGalleryloading (state),
 }); 

11. Visa lastning och felstatus

Medan vi har felet och lastar rekvisita finns det för närvarande ingen användargränssnitt för att ange när de är aktiva. Dessa rekvisita är booleska värden, vilket innebär att vi kan växla visning av komponenter när de är sanna. Uppdatera rendermetoden för att se till att & lt; Fel & GT; och & lt; loading & gt; Komponenter gör istället för galleriet när det behövs.

 Om (fel) {
Retur & LT; Fel / & GT ;;
}
Om (laddas) {
retur och lt; loading / & gt ;;
} 

12. Hämta galleriet igen

Med galleriet laddat kan vi gå vidare till ett enskilt foto. Om du klickar på något av bilderna och uppfriskande sidan laddar du inte upp bilden, eftersom det inte finns någon instruktion på den här sidan, men ändå ladda galleriet. Öppen Container / foto / photo.js och ladda galleriet i komponentdidmontage som i Galleri komponent. De photosloadededed Kontrollera kommer inte att försöka ladda bilderna igen om de redan laddades i galleriet.

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

13. Lägg till en ny kommentar

Användaren kan klicka på fotot där de vill lämna en kommentar. Fotokomponenten kommer att köra AddNewComment Prop-funktionen när detta händer. Inuti AddNewComment Funktion, beräkna den punkt där användaren har klickat på fotot. Servern kräver ett runda heltalsprocent när det sparas.

 Const photo = e.target
 .getBoundingClientRect ();
Const Top = e.clientx - photo.left;
Const left = e.clienty - photo.top;
const toppc = math.round ((topp /
 photo.width) * 100);
const leftpc = math.round ((vänster /
 foto.Height) * 100); 

14. Berätta Redux om kommentaren

Med den beräknade positionen måste vi berätta för Redux om kommentaren så att den kan visa kommentarformen. Det finns redan en åtgärd som ställs in för att lägga till den nya kommentaren på skärmen. Lägg till AddNewComment in i Mapdispatchtoprops och ring det efter att vi beräknat klickets läge.

 This.Props.AddNewComment (
 toppc, leftpc);
[...]
Export Const MapDispatchToprops =
 Dispatch = & gt; ({
AddNewComment: (Top, Left) = & GT;
Dispatch (AddNewComment (Top, Left)),
});

15. Berätta för foto om ny kommentar

När ny kommentarinformation skickas till Redux, måste vi vidarebefordra den till fotos presentationskomponent. Detta gör det möjligt att visa formuläret vid den positionen. Hitta getNewComment Selector, lägg till den till MapStatetoprops och skicka propet till & lt; Photo & gt; .

 Export Const MapStatetoprops =
 (State, Props) = & GT; ({
Nybommelse: GetNewComment (State),
});
& lt; foto [...] newcomment = {
 This.Props.NewComment} / & GT; 

16. Ring thunk i kommentar

Genom att klicka på fotot kommer du att ta upp den nya kommentarformen. Detta är en egen anslutna komponent. När formuläret skickas, kallar den en skicka kommentar Prop-funktionen och går vidare. Detta är en dunk som vi kommer att göra. Öppna container / nybommelse / newcomment.js och lägg till dunk till Mapdispatchtoprops . Passera den propet i den återgivna presentationskomponenten.

 & lt; newComment [...]
 EmployeComment = {EmployeeCribent} / & GT;
Export Const MapDispatchToprops =
 Dispatch = & gt; ({
Ingripande: Kommentar = & GT; avsändande(
Submcomment (kommentar))
});

17. Samla innehåll för thunk

The Thunk ATT Lägg till en ny kommentar har en liknande struktur till hämtningen av galleriet, inklusive en start, framgång och felåtgärd. Det finns ett extra argument som passerat in i denna thunk - The getstate fungera. Detta möjliggör direkt tillgång till det aktuella tillståndet för att fånga data från den. Skapa skicka kommentar thunk in Åtgärder / Nybemuntran / NewComment.js . Varje kommentar är associerad med ett foto och en användare. För den här handledningen är användar-IDet hårdkodad i användare reducerare.

 Export Const DismaceComment = Kommentar
 = & gt; (Dispatch, GetState) = & GT; {
avsändning (submicmentstart ());
const currentphotoid =
GetCurrentPhotoid (GetState ());
const user =
GetCurrentuser (GetState ());
const {vänster, topp} =
getNewComment (getState ());
}; 

18. Skicka in förfrågan

Med alla nödvändiga uppgifter på plats kan vi skicka in kommentaren. Axios har en posta Metod för att hantera POSTA Begäran, med det andra argumentet att vara uppgifterna att skicka in den begäran. Lägg till förfrågan till thunk, passerar i Data i Snake Case för att matcha vad servern förväntar sig.

 Retur Axios
.posta(
"http: // localhost: 3001 / kommentarer", {
user_id: user.id,
Photo_id: Currensphotoid,
kommentar,
vänster,
topp
}) 

19. Hantera framgång och fel

Om löftet från Axios löser eller avvisar, måste vi berätta för programmet om det. Om det löser framgångsrikt, kommer servern att passera innehållet i kommentaren. Vi borde passera det med framgångsåtgärden. Om det blir avvisat, brand en felåtgärd. Uppdatera löftet med sedan och fånga block.

 .Then (({data: {
 ID, kommentar, vänster, topp}}) = & gt;
avsändande(
ENDASTCOMMENTSUCCESS (
ID, kommentar, vänster, topp,
användare, currentphotoid)
)
)
.Catch (() = & GT; Dispatch (
 submicmentError ())); 

20. Lägg till kommentar till foto

Just nu, när kommentaren har lagts till blir det rensat från skärmen men är inte synlig tills sidan uppdateras. Vi kan uppdatera bildernas reducer för att hämta på den nya kommentaren och lägga till den i dess kommentarer, för att visa som resten av dem. Öppna upp reducer / foton / photos.js och lägg till ett fall för att hantera åtgärden. Skapa en kopia av staten för att se till att vi inte av misstag muterar det befintliga tillståndet.

 Case Submit_Combent_Success:
const {id, kommentar, topp, vänster,
Användare, fotoid} = action.payLoad;
const Newstate = Json.Parse (
Json.Stringify (state));
const photo = newstate.find (
Photo = & gt; photo.id === fotoid);
photo.com imms.push ({
ID, kommentar, vänster, topp, användare
});
returnera NewState; 

21. Dölj andra kommentarer

Slutligen, om en annan kommentar är öppen och användaren vill lägga till en ny kommentar, blir UI för rörig. Vi borde dölja kommenturen om en ny kommentar är sammansatt. Vi kan haka i det befintliga Add_new_comment åtgärd för att rensa commentopen värde. Bege dig till Reducer / ui / ui.js och lägg till ett ärende för det.

 Case Add_New_Comment:
lämna tillbaka {
...stat,
Commitopen: odefinierad
}; 

Den här artikeln publicerades ursprungligen i utgåva 283 av kreativ webbdesignmagasin Webbdesigner . Köp utgåva 283 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

• 5 Awesome JavaScript API
• Utveckla återanvändbara reaktionskomponenter
• 9 av de bästa JavaScript-ramarna