Aan de slag met Redux Thunk

Staat is een groot deel van een reageertoepassing, daarom is Redux gewoonlijk ermee gepaard. Die gegevens komen vaak uit een database, waarvoor een verzoek en een reactie vereist is. Voor sommige toepassingen kan deze communicatie constant zijn. Het kan lastig zijn om uitsluitend in reageercomponenten te beheren.

Dit introduceert ook enkele nieuwe problemen - wat gebeurt er als het langzaam laadt, of helemaal niet laadt? Elke component met asynchrone gegevens zou logica moeten bevatten om deze scenario's te behandelen.

Een 'Thunk' is een concept dat kan helpen met deze situatie. Elke dunk is een functie die een andere functie retourneert. Die functie kan dan op een later punt worden opgeroepen, net als een callback. Als we een Thunk kunnen verzenden in plaats van een actieobject, kunnen we een extra logica toevoegen aan een andere gebeurtenis.

Redux Thunk is een bibliotheek die tussen de verzonden acties en de reductiemiddel zit. Wanneer het ziet dat een Thunk wordt verzonden, passeert het enkele methoden in de geretourneerde functie die kan worden gebruikt om verdere acties te verzenden, zoals een succes of foutgebeurtenis.

• 20 briljante jQuery-plug-ins

In deze tutorial zullen we gebruik maken van Thunks om de gegevens van een server in te halen in plaats van van een JSON-bestand, met werken Fotohare - Een aanvraag van foto-commentaar aangedreven door Redux.

Heb je een nieuw site-project, maar heb het nodig om eenvoudig te blijven? Hier zijn onze gidsen de beste website bouwer en web hosting onderhoud. Bestanden delen met anderen? Haal je cloud opslag Rechtsaf.

Download de bestanden voor deze tutorial.

01. Installeer afhankelijkheden

Er zijn twee delen met dit project - de voorste site en de back-end-server die wordt uitgevoerd. Terwijl de tutorial zich richt op de voorkant, hebben we een server nodig om de foto's te halen. Download de projectbestanden en installeer de afhankelijkheden voor zowel de site als de server. Voer de servers voor beide uit en laat ze op de achtergrond lopen.

 / * Eén terminal binnen / site * /
& GT; garen
& GT; garen start
/ * One Terminal Inside / Server * /
& GT; garen
& GT; Garen Start 

02. Stel middleware op

Redux Thunk is een middleware - Functionaliteit die zit tussen acties en reductiemiddelen die kunnen veranderen hoe die acties zich gedragen. Redux ondersteunt meerdere sets middleware die de volledige aanvraag bestrijkt. Ze worden toegevoegd wanneer de winkel is gemaakt met behulp van de componeren methode. Middleware toevoegen aan de createstore methode binnen index.js.

 Importeren {aanbrengmiddleware, componeren}
van "redux";
Import Thunk van "Redux-Thunk";
​
const opslag = createstore (
rootreducer,
componeren(
aanbrengmiddleware (Thunk),
Devtools
​
); 

03. Stel actieve makers in

Het eerste dat we nu moeten doen, is om de foto's in de galerij te laden. Net als regelmatige acties, hebben we actiescheuren nodig voor de verschillende staten die een asynchroon gesprek zal nemen. De meesten zullen hebben begin ​ succes en fout acties. Deze laten Redux weten wat het JavaScript bezig is met het doen. Binnen Acties / foto's / foto's.js , stel drie actiesmakers in voor deze verschillende staten.

 Export const loadgalleryStart = () = & gt;​
Type: load_gallery_start});
Export const loadgallerysuccess =
Foto's = & GT;​
Type: Load_Gallery_Success,
foto's
​
Export Const LoadGalleryError = () = & GT;​
Type: load_gallery_Error}); 

04. Maak een Thunk voor het laden

Thunks werken precies hetzelfde als actierepersonen. We sturen de retourwaarde nog steeds, maar deze keer retourneert het een functie in plaats van een object. De middleware die we eerder hebben opgericht, passeert een verzendmethode in de geretourneerde functie. Hierdoor kunnen we meer acties naar Redux sturen na de eerste verzending. Maak een loadgallery methode die een functie retourneert. Laat het voorlopig een actie verzenden om te laten zien dat de galerij nog steeds laadt.

 Export const loadgallery = () = & gt;
Dispatch = & GT;​
verzending (loadgallerystart ());
}; 

05. Laad gegevens van de server

We zijn nu klaar om te beginnen met het ophalen van de server die we aan het begin hebben ingesteld. We kunnen dit doen door te gebruiken axios - Een pakket dat is ontworpen om met beloften in verschillende browsers te werken. Importeren axios en maak een verzoek om de foto's binnen loadgallery ​Als de belofte oplost, verzendt u de succesactie en verzendt u de foutactie niet. Daarmee is de structuur van de Thunk voltooid.

 Axios importeren uit "Axios";
​
Return Axios
.get ("http: // localhost: 3001 / foto's")
.Ten (respons = & gt; verzending (
loadgallerysuccess (response.data)))
.catch (() = & gt; verzending (
loadgalleryError ())); 

06. Verzend de Thunk

De Thunk zal niets doen totdat het is verzonden. We kunnen dat doen binnen een reageercomponent zoals elke andere actie. Een goede tijd om te beginnen met het laden van de foto's is wanneer de gebruiker van de hoofdgalerij weergeeft. We kunnen reageren gebruiken componentdidmount Lifecycle-methode als een trigger, na het controleren van de galerij is nog niet al geladen. Binnen Componenten / container / galerij / galerij.js Verzend een loadgallery actie door het toe te voegen aan MapDispatchToprops en het bellen binnen componentdidmount ​

 ComponentDIDMountMount () {
if (! deze.props.photosloaded) {
Dit.Propes.LoadGallery ();
​
​
Export Const MapDispatchToprops =
 Dispatch = & GT;​
loadgallery: () = & gt;
verzending (loadgallery ()),
}); 

07. Foto's toevoegen aan succes

Wanneer de foto's terugkomen bij de server, sturen we een Load_gallery_success actie met de foto's. We moeten dit in de staat krijgen via de foto's verloopstuk. Op Verlagers / foto's / foto's.js en voeg een zaak toe voor de succesactie. De payload bevat alle foto's als een array. Zodra de staat is bijgewerkt, geeft de fotosector de foto's door naar de Gallery-component die moet worden weergegeven.

 Case Load_Gallery_Success:
Return Action.photos; 

08. Zet de UI op

Momenteel verschijnen de foto's plotseling nadat ze zijn geladen. Op een langzamere verbinding kijkt de gebruiker naar een leeg scherm totdat het verzoek afwerkt, als het ooit doet. De acties die we naar Load-foto's sturen, kunnen ook worden opgehaald in de UI-reducer om de interface up-to-date te houden met wat er gebeurt. Werk de laad- en foutvlaggen bij binnen de UI-reductiemiddel bij reductiemiddelen / ui / ui.js ​

 Case Load_Gallery_Error:
terugkeer {... staat,
Laden: FALSE, FOUT: TRUE};
case load_gallery_start:
terugkeer {... staat,
Laden: TRUE, FOUT: FALSE};
Case Load_Gallery_Success:
terugkeer {... staat,
Laden: FALSE}; 

09. Laden en foutselector toevoegen

Net als bij de galerijfoto's zelf, hebben we selectors nodig om de verschillende UI-staten-waarden uit Redux te krijgen. We kunnen deze doorgeven aan de galerij, die vervolgens verschillende elementen weergeven als één waar is. In selectors / ui / ui.js , voeg een paar functies toe om de waarden eruit te krijgen.

 Export const isGalleryerrored =
 Staat = & GT; staat.ui.Error;
Export const isGalleryLaden =
 Staat = & GT; staat.ui.loading; 

10. Voeg gegevens toe aan GalleryContainer

Met de selectors gereed, kunnen ze nu aan de Galerij Containercomponent. Hieraan betekent dat de component die verantwoordelijk is voor het weergeven van de galerij niet hoeft te weten hoe de gegevens zijn aangekomen. Op Container / galerij / galerij.js en voeg de selectors toe aan Mapstatetoprops ​Maak constanten voor de waarden om de staat in de volgende stap weer te geven.

 const {fout, laden,
 Foto's} = This.Props;
​
export const mapstatetoprops =
 Staat = & GT;​
Fout: Isgalleryerrored (staat),
Laden: IsgalleryLaden (staat),
 }); 

11. Toon laad- en foutstatus

Hoewel we de fout en het laden van rekwisieten hebben, is er momenteel geen UI om aan te geven wanneer ze actief zijn. Deze rekwisieten zijn Booleaanse waarden, wat betekent dat we het display van componenten kunnen schakelen wanneer ze waar zijn. Werk de rendermethode bij om te controleren of het & LT; FOUT & GT; en & lt; loading & gt; componenten renderen in plaats van de galerij wanneer dat nodig is.

 if (fout) {
RETURN & LT; FOUT / & GT ;;
​
if (laden) {
terugkeer & lt; laden / gt ;;
} 

12. Haal de galerij opnieuw op

Met de galerij geladen kunnen we doorgaan met een individuele foto. Als u op een van de foto's en verfrissende pagina klikt, wordt de foto niet geplaatst, omdat er nog geen instructie op deze pagina is om de galerij te laden. Open container / foto / foto.js en laad de galerij in componentdidmount zoals in de Galerij component. De Photosleded Controle zal niet proberen de foto's opnieuw te laden als ze al in de galerij zijn geladen.

 Als (! Deze.props.photosloaded) {
Dit.Propes.LoadGallery ();
} 

13. Voeg een nieuwe opmerking toe

De gebruiker kan op de foto klikken waar ze een reactie willen achterlaten. De Photo Presentational Component zal de toevoeging Prop-functie wanneer dit gebeurt. Binnen in de toevoeging Functie, bereken het punt waar de gebruiker op de foto is geklikt. De server vereist een ronde integer-percentage -waarde wanneer het wordt opgeslagen.

 const photo = e.target
 .getboundingClientRect ();
const top = e.clientx - foto.leuft;
const links = e.clienty - foto.top;
const toppc = math.Round ((bovenste /
 photo.buide) * 100);
const leftpc = math.Round ((links /
 photo.Height) * 100); 

14. Vertel Redux over de opmerking

Met de berekende positie, moeten we Redux over de opmerking vertellen, zodat het het opmerkingenformulier kan weergeven. Er is al een actie ingesteld om de nieuwe opmerking op het scherm toe te voegen. Toevoegen toevoeging in MapDispatchToprops en bel het nadat we de positie van de klik hebben berekend.

 This.Props.ADDNewCOMMENT (
 Toppc, LeftPC);
​
Export Const MapDispatchToprops =
 Dispatch = & GT;​
addNew. (Top, links) = & GT;
verzending (AddNewComment (bovenaan, links)),
​

15. Vertel foto over nieuwe opmerking

Wanneer nieuwe opmerkingeninformatie wordt doorgegeven aan Redux, moeten we het in de presentatiecomponent van de foto doorgeven. Hierdoor kan deze het formulier op die positie laten zien. Vind de GetNewComment Selector, voeg het toe aan Mapstatetoprops en geef de prop in & lt; foto & gt; ​

 Export const mapstatetoprops =
 (Staat, rekwisieten) = & GT;​
Nieuw: GetNewCOMMENT (staat),
​
& lt; foto [...] nieuwkomment = {
 Dit.Props.NewComment} / & GT; 

16. Bel Thunk in commentaar

Als u op de foto klikt, wordt nu het nieuwe commentaarformulier ingegaan. Dit is zijn eigen aangesloten component. Wanneer het formulier wordt ingediend, noemt het een commentaar toevoegen Prop-functie en wordt gepasseerd. Dit is een Thunk die we zullen maken. Openen Container / NieuwcomeMent / NieuwComment.Js en voeg de Thunk toe aan MapDispatchToprops ​Geef die prop in de gerenderde presentationele component.

 & lt; nieuwheid [...]
 SubmitComment = {INDIENDCOMMENT} / & GT;
Export Const MapDispatchToprops =
 Dispatch = & GT;​
Indienstuk: Commentaar = & GT; verzending(
INDIENDCOMMENT (OPMERKING))
​

17. Verzamel inhoud voor Thunk

De Thunk om een ​​nieuwe opmerking toe te voegen heeft een vergelijkbare structuur voor het ophalen van de galerij, inclusief een start-, succes- en foutactie. Er is een extra argument dat in deze Thunk wordt geleid - de Getstate functie. Dit maakt directe toegang tot de huidige toestand mogelijk om er gegevens van te pakken. Maak de commentaar toevoegen Thunk in Acties / Nieuwcoment / NewComment.js ​Elke opmerking wordt geassocieerd met een foto en een gebruiker. Voor deze tutorial is de gebruikers-ID hard gecodeerd in de gebruiker verloopstuk.

 Export const subscomment = commentaar
 = & GT; (verzending, getstate) = & GT;​
verzending (subsioncommentaart ());
const currentphotoïde =
GETCURRENTPHOOID (GETSTATE ());
const gebruiker =
GETCURRENTUSER (GETSTATE ());
const {links, top} =
GetNewCOMMENT (Getstate ());
}; 

18. Plaats het verzoek

Met alle benodigde gegevens op zijn plaats, kunnen we de opmerking indienen. Axios heeft een post methode om mee om te gaan POST Verzoeken, waarbij het tweede argument de gegevens is om dat verzoek in te sturen. Voeg het verzoek toe aan de Thunk, passeer gegevens in Snake Case om overeen te komen met wat de server verwacht.

 Return Axios
.post(
"Http: // localhost: 3001 / reacties", {
user_id: user.id,
Photo_id: CurrentPhotoïde,
commentaar,
links,
top
}) 

19. Behandel succes en fout

Als de belofte van Axios oplost of verwerpt, moeten we de aanvraag hierover vertellen. Als het succesvol oplost, passeert de server de inhoud van de opmerking. Daar moeten we doorheen gaan met het succes. Als het wordt afgewezen, vuur dan een foutmelding. Update de belofte met vervolgens en vangst blokken.

. Den (({gegevens: {
 ID, commentaar, links, top}}) = & GT;
verzending(
indienenCommentsuccess (
ID, commentaar, links, top,
gebruiker, currentphotoïde)
​
​
.catch (() = & gt; verzending (
 SubmitCommenterRor ())); 

20. Voeg commentaar toe aan foto

Nu, zodra de opmerking met succes wordt toegevoegd, wordt het van het scherm gewist, maar is het niet zichtbaar totdat de pagina vernieuwt. We kunnen de reducer van de foto's bijwerken om de nieuwe opmerking op te halen en deze toe te voegen aan zijn reactiesarray, om als de rest van hen weer te geven. Open reducer / foto's / foto's.js en voeg een zaak toe om de actie af te handelen. Maak een kopie van de staat om ervoor te zorgen dat we de bestaande staat niet per ongeluk mutsen.

 Case Submit_Comment_Success:
const {id, commentaar, top, links,
gebruiker, fotoID} = actie.payload;
const newstate = json.parse (
Json.stringify (staat));
const photo = newstate.find (
photo = & GT; photo.id === photoID);
photo.cohert.push ({
ID, commentaar, links, top, gebruiker
​
terugkeer newstate; 

21. Verberg andere opmerkingen

Ten slotte, als een andere opmerking open is en de gebruiker een nieuwe opmerking wil toevoegen, wordt de UI te rommelig. We moeten het commentaarvak verbergen als er een nieuwe opmerking wordt gecomponeerd. We kunnen in de bestaande haken Add_new_commment actie om de commentopen waarde. Op reducer / ui / ui.js en voeg daar een geval voor toe.

 Case add_new_comment:
terugkeer {
...staat,
Opmerkingen: undefined
}; 

Dit artikel is oorspronkelijk gepubliceerd in kwestie 283 van Creative Web Design Magazine Webdesigner ​ Koop hier nummer 283 of Abonneer u hier op Web Designer ​

Gerelateerde artikelen:

• 5 Awesome Javascript API's
• Ontwikkel herbruikbare reageercomponenten
• 9 van de beste JavaScript-frameworks