Začínáme s Reduxem Thunk

Stát je velkou částí reakcí aplikace, což je důvod, proč je s ním běžně spárován. Tato data často pocházejí z databáze, která vyžaduje požadavek a odpověď. Pro některé aplikace může být tato komunikace konstantní. To může být složité snahy zvládnout výhradně v reakcí komponentách.

To také zavádí některé nové problémy - co se stane, pokud se načte pomalu, nebo se vůbec nenastaví? Každá komponenta zabývající se asynchronními údaji by musela obsahovat logiku zvládnout tyto scénáře.

"Thunk" je koncept, který může pomoci s touto situací. Každá thunk je funkce, která vrátí jinou funkci. Tato funkce pak může být volána později, podobně jako zpětné volání. Kdybychom mohli expedovat thunk místo akčního objektu, můžeme přidat do nějaké další logiky v reakci na jinou akci.

Redux Thunk je knihovna, která sedí mezi odeslanými akcemi a reduktorem. Když je vyslán thunk, projde některé metody do vrácené funkce, kterou lze použít k odeslání dalších akcí, jako je úspěch nebo chybová událost.

• 20 brilantní jquery plugins

V tomto tutoriálu využijeme Thunks, které pomohou vytáhnout data ze serveru spíše než ze souboru JSON, pracovat s Photoshare. - Foto-komentovací aplikace Powered by Redux.

Máte nový projekt webu, ale potřebujete to zůstat jednoduchý? Zde jsou naše průvodci nejlepším Webové stránky Builder. a web hosting servis. Sdílení souborů s ostatními? Dostat se cloudové úložiště že jo.

Stáhněte si soubory pro tento tutoriál.

01. Instalovat závislosti

K tomuto projektu jsou dvě části - přední konec a zadní koncový server běží. Zatímco tutoriál se zaměřuje na přední konec, potřebujeme server spuštěný, aby se načíst fotografie. Stáhněte soubory projektu a nainstalujte závislosti pro web i server. Spusťte servery pro oba a nechte je v pozadí běží.

 / * Jeden terminál uvnitř / místo * /
& gt; příze
& gt; příze start
/ * Jeden terminál uvnitř / server * /
& gt; příze
& gt; Start příze 

02. Nastavte middleware

Redux Thunk je Middleware. - Funkce, která sedí mezi akce a reduktory, které mohou změnit, jak se tyto akce chovají. Redux podporuje více sad middlewaru, které pokrývají celou aplikaci. Přidají se, když je obchod vytvořen pomocí komponovat metoda. Přidat middleware Createstore. Metoda v rámci index.js.

 Import {ApplyMiddddware, compose}
od "redux";
import thunk z "redux-thunk";
[...]
CONST Store = CreatEstore (
rootreduker,
komponovat(
ApplyMiddleWare (Thunk),
devtools.
)
); 

03. Nastavte akční tvůrce

První věc, kterou musíme udělat, je načíst fotografie do galerie. Jako pravidelné akce potřebujeme akční tvůrce pro různé stavy, že asynchronní volání bude trvat. Většina bude mít Start , úspěch a chyba akce. Ty umožňují redux vědět, co je javascript zaneprázdněn. V rámci Akce / Fotografie / Fotografie.js , Nastavte tři akční tvůrce pro tyto různé stavy.

 Export CONST LoadGalereryStart = () = & gt; ({
Typ: load_gallery_start});
Export CONST LoadGallerySuccess =
fotografie = & gt; ({
Typ: load_gallery_success,
fotky
});
Export CONST LOADGALLERYError = () = & gt; ({
Typ: Load_Gallery_Error}); 

04. Vytvořte thunk pro načítání

Thunks pracují přesně stejně jako akční tvůrci. Stále odešli návratovou hodnotu, ale tentokrát vrátí funkci namísto objektu. Middleware, který jsme nastavili dříve, předá metodu expedice do vrácené funkce. To nám umožňuje po počátečním odeslání posílat více akcí na Redux. Vytvořit loadgallery. metoda, která vrátí funkci. Prozatím odeslat akci, aby ukázala, že galerie stále načítá.

 Export CONST LoadGalerery = () = & GT;
expedice = gt; {
Odeslání (LoadGalereryStart ());
}; 

05. Načíst data ze serveru

Nyní jsme připraveni začít načítání ze serveru, který jsme zřídili na začátku. Můžeme to udělat pomocí axios - balíček určený k práci se sliby napříč různými prohlížeči. Import axios a přispět žádost o fotografie uvnitř loadgallery. . Pokud slib řeší, odesílá akci úspěchu a ne-li odesílat chybovou akci. S tím je struktura thunk kompletní.

 Importní axios z "axiosu";
[...]
vrátit Axios.
.get ("http: // localhost: 3001 / fotky")
..) (odezva = & gt; expedice (
LoadGalerageSuccess (Response.Data))))
.catch (() = & gt; expedice (
LoadGalleryError ())); 

06. Odeslání thunk

Thunk nebude dělat nic, dokud nebude odesláno. Můžeme to udělat v rámci reaktivní složky jako jakákoli jiná akce. Dobrá doba pro zahájení načítání fotografií je, když uživatel zobrazí hlavní galerii. Můžeme použít reakcí ComponentDidMount. Metoda životního cyklu jako spoušť, po kontrole galerie není již načtena. V rámci Komponenty / Kontejner / Galerie / Galerie. Odeslat A. loadgallery. akce přidáním Mapdispatchtoprops. a volat to uvnitř ComponentDidMount. .

 ComponentDidMount () {
Pokud (! this.props.photosloaded) {
this.props.loadgallery ();
}
}
Export CONST MAPDISPATCHTopProps =
 expedice = gt; ({
loadgallery: () = & gt;
Odeslání (LoadGalerery ()),
}); 

07. Přidat fotky na úspěch

Když se fotografie vrátí ze serveru, expedujeme Load_gallery_success. akce s fotografiemi. Musíme to dostat do stavu prostřednictvím fotky reduktor. Hlavu Reducers / Fotografie / photos.js a přidat případ akce úspěchu. Zaplacení obsahuje všechny fotografie jako pole. Jakmile je stav aktualizován, volič fotografií předá fotografiemi do složky galerie, která má být zobrazena.

 Case load_gallery_success:
Návrat akce.Photos; 

08. Nastavte UI

V současné době se snímky náhle objevují po načtení. Na pomalejším připojení se uživatel dívá na prázdnou obrazovku, dokud se požadavek nedokončí, pokud ano. Akce, které odesíláme načítání fotografií, lze také vyzvednout v redukci UI, aby bylo možné udržet rozhraní aktuální s tím, co se děje. Aktualizujte vlajky načítání a chyby v rámci redukce UI Redukční / UI / UI.js .

 Case Load_Gallery_Error:
návrat {... stát,
Načítání: false, chyba: true};
Case load_gallery_start:
návrat {... stát,
Načítání: true, chyba: false};
Case load_gallery_success:
návrat {... stát,
Načítání: false}; 

09. Přidání voliče načítání a chyby

Stejně jako u samotných fotografií galerie potřebujeme selektory, abyste získali různé hodnoty UI stavů z Reduxu. Můžeme to projít do galerie, která pak bude poskytovat různé prvky, pokud je jedna pravda. v Vyberte / UI / UI.js , Přidejte několik funkcí, abyste získali hodnoty.

 Export CONST ISGALERYERRED =
 Stav = & gt; State.ui.Error;
Export CONST ISGAlleryLoading =
 Stav = & gt; State.ui.Loading; 

10. Přidat data do galerieKontainer

S selektory selektory mohou být nyní přidány do Galerie Kontejnerová komponenta. Přidání je zde znamená, že komponenta odpovědná za zobrazení galerie nemusí vědět, jak dorazí data. Hlavu Kontejner / galerie / galerie. a přidejte selektory MapStateToprops. . Udělejte konstanty pro hodnoty, které vám pomohou zobrazit stav v dalším kroku.

 CONST {Chyba, načítání,
 Fotografie} = this.props;
[...]
Export CONST MAPSTATETPROPS =
 Stav = & gt; ({
Chyba: ISGallereryerrored (stát),
Načítání: ISGAlleryLoading (stav),
 }); 

11. Zobrazit stav načítání a chyby

I když máme chybu a načítání rekvizit, v současné době není uživatelská jednotka indikována, když jsou aktivní. Tyto rekvizity jsou booleovské hodnoty, což znamená, že můžeme přepínat zobrazení komponent, když jsou pravdivé. Aktualizujte metodu render, abyste se ujistili & lt; chyba & gt; a & lt; zatížení & gt; Komponenty vykreslují místo galerie v případě potřeby.

 Pokud (chyba) {
návrat  gt;
} 

12. Znovu otevřete galerii

S galerií načtenou, můžeme jít na individuální fotografii. Kliknutím na některou z fotografií a obnovování stránky není načíst fotografii zálohování, protože na této stránce není pokyny pro načtení galerie. Otevřeno Kontejner / Foto / photo.js a načíst galerii v ComponentDidMount. Stejně jako v Galerie komponent. . \ T photosloaded. Kontrola se nebude snažit, že fotografie znovu načte, zda byly již načteny v galerii.

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

13. Přidat nový komentář

Uživatel může kliknout na fotografii, kde chtějí zanechat komentář. Fotografická prezentační složka spustí AddNewComment. Při k tomu dojde. Uvnitř AddNewComment. Funkce, vypočítat bod, kdy uživatel klikl na fotografii. Server vyžaduje, když se ušetříte procentuální hodnotu celé číslo.

 CONST PHOTO = E.TARGET
 .getboundingclientrect ();
CONST top = E.Clientx - photo.left;
CONST vlevo = E.Clienty - foto.top;
CONST TopPC = math.round ((top /
 photo.width) * 100);
CONST LEFTPC = math.round ((vlevo /
 photo.Height) * 100); 

14. Řekněte Redux o komentáři

S vypočítanou pozicí pak musíme říct Redux o komentáři, takže může zobrazit formulář komentáře. Pro přidání nového komentáře na obrazovce je již aktuální akce. Přidat AddNewComment. do Mapdispatchtoprops. a zavolejte to poté, co jsme vypočítali polohu kliknutí.

 this.props.AddnewComment (
 toppc, levice);
[...]
Export CONST MAPDISPATCHTopProps =
 expedice = gt; ({
AddNewComment: (nahoře, vlevo) = & gt;
expedice (addnewcomment (horní, doleva)),
});

15. Řekněte fotku o novém komentáři

Když jsou nové informace o komentářech předány reduxu, musíme jej předat do fotografické prezentační složky. To umožňuje ukázat formulář v této poloze. Najít getnewcomment. volič, přidejte jej MapStateToprops. a projít & lt; photo & gt; .

 Export CONST MAPSTATETROPS =
 (stát, rekvizity) = & gt; ({
Nová přítomnost: getnewcomment (stát),
});
& lt; fotografie [...] nováček = {
 this.props.newcomment} / & gt; 

16. Zavolejte thunk v komentáři

Kliknutím na fotografii nyní vyvoláte nový formulář komentáře. Toto je vlastní připojená komponenta. Když je formulář odeslán, volá a předložení Funkci a dostane projít. To je thunk, který budeme dělat. Otevřít Kontejner / Nové nová přítomnost.JS a přidejte thunk Mapdispatchtoprops. . Projít, že prop do vykreslené prezentační složky.

 Nová přítomnost [...]
 odeslání = {sublotcomment} / & gt;
Export CONST MAPDISPATCHTopProps =
 expedice = gt; ({
Úložiště: komentář = & gt; odeslání(
Odstranit (komentář))
});

17. Sbírejte obsah pro thunk

Thunk přidat nový komentář má podobnou strukturu na načítání galerie, včetně akce start, úspěch a chyby. Do tohoto thunk je dodatný argument getstate. funkce. To umožňuje přímý přístup k aktuálnímu stavu, aby se zabýval data z ní. Vytvořit. předložení thunk in. Akce / Nová přítomnost / Newcomment.js . Každý komentář je spojen s fotografií a uživatelem. Pro tento tutoriál je ID uživatele pevně kódováno do uživatel reduktor.

 Export Const SublotComment = Komentář
 = & gt; (expedice, getstate) = & gt; {
Odeslání (SubmitCommentStart ());
CONST ARVETHOIDAID =.
getCurrentfotoidy (getstate ());
CONST User =
getCurrentuser (getstate ());
CONST {vlevo, top} =
getnewcomment (getstate ());
}; 

18. Přidejte žádost

Se všemi potřebnými údaji na místě můžeme předložit komentář. Axios má A. pošta metoda POŠTA požadavky, s druhým argumentem, který je data odeslána v tomto požadavku. Přidejte požadavek na thunk, předávání dat v případě Snake, aby odpovídal tomu, co server očekává.

 Vrátit axios
.pošta(
"http: // localhost: 3001 / komentáře", {
user_id: user.id,
photo_id: currentphoto,
komentář,
vlevo, odjet,
horní
}) 

19. Úspora a chyba

Pokud slib z Axiosu řeší nebo odmítne, musíme aplikaci sdělit. Pokud se úspěšně řeší, server předá obsah komentáře. Měli bychom to projít s úspěchem. Pokud se dostane odmítnut, oheň chybu. Aktualizovat slib pak a úlovek bloky.

 .Then (({Data: {
 ID, komentář, doleva, top}}) = & gt;
odeslání(
SubmitCommentsUccess (
ID, komentář, doleva, top,
Uživatel, aktuální)
)
)
.catch (() = & gt; expedice (
 SubstCommentError ()); 

20. Přidat komentář na fotografii

Právě teď, jakmile je komentář úspěšně přidán, bude vymazán z obrazovky, ale není viditelný, dokud se stránka obnovuje. Můžeme aktualizovat redukce fotografií vyzvednout na nový komentář a přidat jej do pole komentáře, zobrazit se jako zbytek. Otevřete reduktor / fotografie / photos.js a přidejte případ pro zpracování akce. Vytvořte kopii stavu, abyste se ujistili, že nemutně mutujete stávající stav.

 Case Submit_Comment_Success:
const {id, komentář, horní, doleva,
Uživatel, FotoID} = Action.PaYload;
const newstate = json.parse (
Json.stringify (stát));
CONST PHOTO = NEWSTETATE.FIND (
photo = & gt; photo.ID === photoID);
photo.Comments.Push ({
ID, komentář, doleva, top, uživatel
});
vrátit newstate; 

21. Skrýt další komentáře

Nakonec, pokud je otevřen jiný komentář a uživatel chce přidat nový komentář, UI se příliš přeplněná. Měli bychom skrýt pole Komentář, pokud je sestaven nový komentář. Můžeme hák do stávající Add_new_comment. opatření k vymazání komentář hodnota. Hlavu Reduktor / Ui / Ui.js a přidejte pro to případ.

 Case add_new_comment:
vrátit se {
...Stát,
Komentář: undefined.
}; 

Tento článek byl původně publikován v čísle 283 časopisu Creative Web Design Web Designer. . Prodám vydání 283 zde nebo Přihlásit se zde web designer zde .

Související články:

• 5 Úžasné JavaScript API
• Vyvíjet opakovaně použitelné reakční komponenty
• 9 nejlepších rámců JavaScriptu