Aloita Redux Thunk

State on suuri osa reagoivaa sovellusta, minkä vuoksi REDUX on yleisesti pariksi. Nämä tiedot ovat usein tietokannasta, mikä vaatii pyynnön ja vastauksen. Joissakin sovelluksissa tämä viestintä voi olla vakio. Se voi olla hankala, joka yrittää hallita pelkästään reagoida komponentteja.

Tämä myös esittelee joitakin uusia ongelmia - mitä tapahtuu, jos se lataa hitaasti tai ei lataudu lainkaan? Jokaisen asynkronisen datan käsittelemiseen tarkoitetaan logiikkaa käsitellä näitä skenaarioita.

"Thunk" on konsepti, joka voi auttaa tässä tilanteessa. Jokainen Thunk on toiminto, joka palauttaa toisen toiminnon. Tätä toimintoa voidaan sitten kutsua myöhemmin, paljon kuin soittopyyntö. Jos voisimme lähettää thunkin toiminta-objektin sijasta, voimme lisätä jonkin verran ylimääräistä logiikkaa reaktiossa toiseen tapahtumaan.

Redux Thunk on kirjasto, joka istuu lähetettyjen toimien ja vähennysventtiilin välillä. Kun se näkee, että Thunk lähetetään, se kulkee joitain menetelmiä palautettuun toimintaan, jota voidaan käyttää lähettämään uusia toimia, kuten menestys tai virhetapahtuma.

• 20 Brilliant jQuery-laajennukset

Tässä opetusohjelmassa käytämme thunksia, jotka auttavat vetämään tietoja palvelimelta eikä JSON-tiedostosta työskentelemällä Photoshare - Reduxin avulla powered foment-kommentointi.

Sai uuden sivuston projektin, mutta tarvitset sen pysyä yksinkertaisena? Seuraavassa on oppaamme parhaiten Verkkosivuston rakentaja ja sivujen ylläpito Palvelu. Tiedostojen jakaminen muiden kanssa? Saada pilvivarasto Oikea.

Lataa tiedostot Tähän opetusohjelmaan.

01. Asenna riippuvuudet

Tähän projektiin on kaksi osaa - etupäätepaikka ja takapäällyste toimii. Vaikka opetusyksikkö keskittyy etupäähän, tarvitsemme palvelimen, jotta voit hakea valokuvia. Lataa projektitiedostot ja asenna riippuvuudet sekä sivustolle että palvelimelle. Suorita palvelimet molemmille ja jätä ne taustalla.

 / * Yksi terminaali sisällä / sivusto * /
& gt; lanka
& gt; lanka alkaa
/ * Yksi terminaali sisällä / palvelin * /
& gt; lanka
& gt; Lanka alkaa 

02. Määritä Middleware

Redux Thunk on a Middleware - toiminnallisuus, joka istuu toimien ja vähennysventtiilien välillä, jotka voivat muuttaa näiden toimien käyttäytymistä. Redux tukee useita järjestelmiä, jotka kattavat koko sovelluksen. Ne lisätään, kun myymälä luodaan säveltää menetelmä. Lisää keskikoko luoma Menetelmä index.js.

 Tuonti {ApplyMiddleware, Compose}
"Redux";
Tuo Thunk "Redux-Thunk";
[...]
const store = Createstore (
Rootreducer,
säveltää(
ApplyMiddleware (Thunk),
devtools
)
); 

03. Aseta toiminnan luojat

Ensimmäinen asia, jota meidän on tehtävä nyt, on ladata kuvat galleriaan. Kuten säännölliset toimet, tarvitsemme eri valtioille toiminnan luojia, joita asynkroninen puhelu kestää. Useimmilla on alkaa , menestys ja virhe Toiminnot. Nämä anna Redux tietää, mitä JavaScript on kiireinen. Sisällä Toimet / kuvat / valokuvat.js , perustaa nämä kolme toimenpidettä näille eri valtioille.

 Export Const LoadGallerystart = () = & GT; ({
Tyyppi: load_gallery_start});
Vienti const ladagalallerysuccess =
Valokuvat = & gt; ({
Tyyppi: load_gallery_success,
Valokuvat
});
Vienti const ladaggallerError = () = & gt; ({
Tyyppi: load_gallery_error}; 

04. Luo thunk lataus

Thunks toimii täsmälleen samat kuin toimintaluoneet. Lähetämme edelleen paluuarvoa, mutta tällä kertaa se palauttaa tehtävän esineen sijasta. Middleware, jonka olemme perustaneet aikaisemmin, siirtävät lähetysmenetelmän palautetusta toiminnasta. Tämä antaa meille mahdollisuuden lähettää uusia toimia REDUX: n alkuperäisen lähetyksen jälkeen. Luo lataa Menetelmä, joka palauttaa toiminnon. Toistaiseksi se lähettää kanteen, jossa osoitetaan, että galleria latautuu edelleen.

 Export cons cont ladagallery = () = & gt;
Lähetys = & gt; {
Lähetys (LoadGallerystart ());
}; 

05. Lataa tiedot palvelimelta

Olemme nyt valmiita aloittamaan hakemaan palvelimelta, jonka olemme perustaneet alussa. Voimme tehdä tämän käyttämällä Axios - Pakkaus, joka on suunniteltu toimimaan lupausten kanssa eri selaimissa. Tuonti Axios ja pyydä valokuvia lataa . Jos lupaus ratkaisee, lähetä menestystoimet ja jos et lähetä virhetoimintaa. Tällöin Thunkin rakenne on valmis.

 tuontiakselit "Axiosista";
[...]
Palauta aksioita
.get ("http: // localhost: 3001 / kuvat")
.Tän (vastaus = & gt; lähetys (
Lataagallerysuccess (vastaus.Data)))
.Catch (() = & gt; lähetys (
LoadGalleryError ())); 

06. Lähettäkää Thunk

Thunk ei tee mitään, ennen kuin se on lähetetty. Voimme tehdä sen reagoivan komponentin sisällä kuin mikä tahansa muu toiminta. Hyvä aika aloittaa valokuvien lataaminen on, kun käyttäjä katsoo päägalleriassa. Voimme käyttää reagoivaa ComponentDidmount Lifecycle-menetelmä laukaisuina, kun olet tarkistanut galleriaa, ei ole vielä ladattu. Sisällä Komponentit / kontti / Galleria / Gallery.js lähetettävä a lataa toimenpide lisäämällä se MAPDISPATCHTOPPOPS ja kutsua sitä ComponentDidmount .

 ComponentDidmount () {
jos (! This.Props.Photosload) {
This.Props.loadGallery ();
}
}
Vie Cont MAPDISPATCHTOPPOPS =
 Lähetys = & gt; ({
Lataa: () = & gt;
Lähetys (ladagallery ()),
}); 

07. Lisää kuvia menestyksestä

Kun valokuvat tulevat takaisin palvelimelta, lähetämme a Load_gallery_success Toiminta valokuvien kanssa. Meidän on saatava tämä valtiolle Valokuvat vähennysventtiili. Suunnata Vahvisteet / kuvat / valokuvat.js ja lisää tapaus menestystoiminnalle. Payload sisältää kaikki kuvat ryhmänä. Kun tila päivitetään, valokuvanvalitsin siirtää valokuvat näytettävän galleriakomponenttiin.

 Case Load_Gallery_Success:
Paluu Action.Photos; 

08. Aseta UI

Tällä hetkellä kuvat näkyvät yhtäkkiä sen jälkeen, kun ne on ladattu. Hitaammalla yhteydellä käyttäjä tarkastelee tyhjää näyttöä, kunnes pyyntö päättyy, jos se koskaan tekee. Valokuvien lataamamme toimet voidaan myös ottaa käyttöön UI-vähennysventtiilillä, jotta rajapinta pysyy ajan tasalla, mitä tapahtuu. Päivitä lataus- ja virhalukut UI-vähennysventtiilillä osoitteessa Vähennyslaitteet / UI / UI.JS .

 Case Load_Gallery_error:
palata {... osavaltio,
Ladataan: FALSE, ERROR: TRUE};
Case Load_Gallery_Start:
palata {... osavaltio,
Ladataan: Totta, virhe: FALSE};
case load_gallery_success:
palata {... osavaltio,
Ladataan: FALSE}; 

09. Lisää lataus- ja virheenvalinta

Kuten Galleria-valokuvien kanssa, tarvitsemme valitsimia saada eri UI-valtiot arvot Reduxista. Voimme siirtää nämä galleriaan, mikä tekee eri elementtejä, jos joku on totta. Sisään Valitsimet / UI / UI.JS , lisää pari toimintoa saadaksesi arvot ulos.

 Export Const IsgallerRored =
 State = & gt; state.ui.error;
Vie Const IsgalleryLoading =
 State = & gt; state.ui.loading; 

10. Lisää tiedot GalleryContaineriin

Valitut valitut, ne voidaan nyt lisätä Galleria Säiliön komponentti. Niiden lisääminen tarkoittaa, että gallerian näyttämisestä vastaava komponentti ei tarvitse tietää, miten tiedot ovat saapuneet. Suunnata Kontti / Galleria / Gallery.js ja lisää valitsimet MapStateToprops . Tee vakiot arvot auttaa näyttämään valtion seuraavassa vaiheessa.

 const {virhe, lastaus,
 Kuvat} = tämä.Props;
[...]
Vienti cont mapstatetoprops =
 State = & gt; ({
Virhe: Isgalleryerrored (osavaltio),
Ladataan: IsgalleryLoading (osavaltio),
 }); 

11. Näytä lataus- ja virhetila

Vaikka meillä on virhe ja lastaus rekvisiitta, tällä hetkellä ei ole UI: ta osoittamaan, milloin ne ovat aktiivisia. Nämä rekvisit ovat Boolen arvoja, mikä tarkoittaa, että voimme vaihtaa komponenttien näytön, kun ne ovat totta. Päivitä render-menetelmä varmistaaksesi & lt; virhe & gt; ja & lt; lastaus & gt; Komponentit tekevät gallerian sijaan tarvittaessa.

 Jos (virhe) {
Paluu & lt; virhe / & gt ;;
}
jos (lastaaminen) {
Paluu & lt; lastaus / gt ;;
} 

12. Hae galleria uudelleen

Kun galleria ladataan, voimme siirtyä yksittäiseen valokuvaan. Klikkaamalla mihin tahansa valokuvista ja sivun virkistäminen ei lataa valokuvaa takaisin ylös, koska sivulla ei vielä ole ohjeita ladata galleria. Avata Kontti / valokuva / photo.js ja lataa galleria sisään ComponentDidmount kuten Galleria komponentti. The Photoslomattu Tarkista valokuvasi ei yritä ladata uudelleen, jos ne on jo ladattu galleriaan.

 Jos (! This.Props.Photosloadoitu) {
This.Props.loadGallery ();
} 

13. Lisää uusi kommentti

Käyttäjä voi napsauttaa kuvaa, jossa he haluavat jättää kommentin. Valokuvan esittelyssä komponentti toimii AddvewMment Prop-toiminto, kun näin tapahtuu. Sisällä AddvewMment Toiminto, laske kohta, jossa käyttäjä on napsauttanut valokuvan sisällä. Palvelin vaatii pyöreän kokonaislukuprosenttiarvon, kun se tallennetaan.

 const photo = e.target
 .getboundingclientrect ();
const top = e.clientx - photo.left;
const left = e.clienty - photo.top;
const toppc = matematiikka ((ylhäältä /
 photo.width) * 100);
const leftpc = matematiikka.round ((vasen /
 photo.height) * 100); 

14. Kerro Redux noin kommentti

Kun asema lasketaan, meidän on sitten kerrottava Redux noin kommentti, jotta se voi näyttää kommenttilomakkeen. Uusi kommentti on jo toiminnassa näytöllä. Lisätä AddvewMment osaksi MAPDISPATCHTOPPOPS ja soita se sen jälkeen, kun olemme laskeneet napsautuksen sijainnin.

 This.Props.AdDnewment (
 topc, leftpc);
[...]
Vie Cont MAPDISPATCHTOPPOPS =
 Lähetys = & gt; ({
AddNewment: (yläosa, vasen) = & gt;
lähettäminen (AddNewment (ylhäällä vasemmalla)),
});

15. Kerro kuva uudesta kommentoinnista

Kun uudet kommenttitiedot siirretään Reduxille, meidän on siirrettävä se valokuvakehyksen osaksi. Tämä mahdollistaa sen näyttää lomakkeen kyseisessä asennossa. Etsi GetnewMment Valitsija, lisää se MapStateToprops ja siirrä etu & lt; foto & gt; .

 Vienti cont mapstatetoprops =
 (Valtio, rekvisiitta) = & gt; ({
Uusi: GetnewMment (osavaltio),
});
& lt; kuva [...] uusius = {
 This.Props.Newmenment} / & gt; 

16. Soita Thunk kommenttiin

Napsauttamalla valokuvaa nyt julkaisee uuden kommenttilomakkeen. Tämä on oma liitetty osa. Kun lomake toimitetaan, se kutsuu a Lähetä kommentti Prop-toiminto ja se kulkee. Tämä on Thk, että teemme. Avata Container / Newmenment / Newcomment.js ja lisää Thunk MAPDISPATCHTOPPOPS . Läpäise tämä propentaalisen osaan.

 & lt; uusi yhteistyö [...]
 AdrateComment = {Equality} / & gt;
Vie Cont MAPDISPATCHTOPPOPS =
 Lähetys = & gt; ({
VAIKUTUS: Kommentti = & GT; lähettää(
(kommentti))
});

17. Kerää sisällön Thunk

Uuden kommentin lisäämiseksi on samanlainen rakenne gallerian haettuun, mukaan lukien alku, menestys ja virhetoiminto. Tässä Thankissa on ylimääräinen argumentti getState Toiminto. Tämä mahdollistaa suoraa pääsyä nykyiseen tilaan, jotta voit tarttua tietoihin. Luo Lähetä kommentti täpötäys Toimet / uusivuosi / uusiuskomitea.js . Jokainen kommentti liittyy valokuvaan ja käyttäjälle. Tämän opetusohjelman osalta käyttäjätunnus on kovaa koodattua käyttäjä vähennysventtiili.

 Export Const FixMment = kommentti
 = & gt; (Lähetys, GetState) = & GT; {
lähettäminen (summancommentStart ());
const currentphoid =
getcurrentphoid (getstate ());
const käyttäjä =
getcurrentuser (getstate ());
const {vasen, ylhäältä} =
GetnewMment (GetState ());
}; 

18. Lähetä pyyntö

Kaikki tarvittavat tiedot paikallaan voimme lähettää kommentin. Axios on a lähettää Menetelmä käsitellä LÄHETTÄÄ Pyynnöt, joiden toinen väite on kyse tässä pyynnöstä. Lisää pyyntö Thunkista, joka kulkee tiedossa käärmeen tapauksessa vastaamaan, mitä palvelin odottaa.

 Return Axios
.lähettää(
"http: // localhost: 3001 / kommentit", {
USER_ID: User.id,
Photo_ID: Ajoneuvophoid,
kommentti,
vasemmalle,
huippu
}) 

19. Käsittele menestystä ja virhe

Jos Axios-lupaus ratkaisee tai hylkää, meidän on kerrottava hakemuksesta siitä. Jos se ratkaisee onnistuneesti, palvelin siirtää kommentin sisällön. Meidän pitäisi välittää se menestystoimella. Jos se hylätään, palaa virhetoiminnon. Päivitä lupaus sitten ja ottaa kiinni lohkot.

. Sitten (({data: {
 ID, kommentti, vasen, ylhäältä}}) = & gt;
lähettää(
SubmitcomsUsuccess (
ID, kommentti, vasen, ylhäältä,
Käyttäjä, CurrentPhoid)
)
)
.Catch (() = & gt; lähetys (
 summatCommentError ())); 

20. Lisää kommentti kuva

Juuri nyt, kun kommentti lisätään onnistuneesti, se poistuu näytöstä, mutta se ei ole näkyvissä, kunnes sivu virkistää. Voimme päivittää valokuvien vähennyskelpoisen poimiaksesi uuden kommentin ja lisää sen kommenttien ryhmään, jotta voit näyttää, kuten muut. Avaa vähennyskelpoinen / valokuvat / valokuvat.js ja lisää tapaus käsitellä toimintaa. Luo kopio valtiosta varmistaaksemme, että emme vahingossa mutata olemassa olevaa tilaa.

 Case submit_comment_success:
const {id, kommentti, alkuun, vasemmalle,
Käyttäjä, Photoid} = Toiminta.Payload;
const Newstate = json.parse (
Json.straify (osavaltio));
const photo = newstate.find (
Kuva = & gt; photo.id === fotoidi);
Photo.com >Spush ({
ID, kommentti, vasen, ylhäältä käyttäjä
});
Paluu Newstate; 

21. Piilota muut kommentit

Lopuksi, jos toinen kommentti on auki ja käyttäjä haluaa lisätä uuden kommentin, UI on liian täynnä. Meidän pitäisi piilottaa kommentti-ruutu, jos uusi kommentti koostuu. Voimme koota olemassa olevaan Add_new_coment toimia kommentti arvo. Suunnata Reducer / UI / UI.JS ja lisää tapaus.

 Asia Add_new_coment:
palaa {
...osavaltio,
kommentti: määrittelemätön
}; 

Tämä artikkeli julkaistiin alun perin asiassa 283 Creative Web Design Magazine Nettisivujen suunnittelija . Osta numero 283 Täällä tai Tilaa Web-suunnittelija tähän .

Aiheeseen liittyvät artikkelit:

• 5 Awesome JavaScript Apis
• Kehittää uudelleenkäytettävät reagoivat komponentit
• 9 parhaista JavaScript-kehyksistä