Kezdje el a Redux Thugs-t

Az állam egy REACE alkalmazás nagy része, ezért a Redux általánosan párosítva van vele. Ez az adatok gyakran egy adatbázisból származnak, ami kérelmet és választ igényel. Néhány alkalmazás esetében ez a kommunikáció állandó lehet. Ez lehet trükkös, hogy kizárólag a React Components-en belül kezelje.

Ez új problémákat is bemutat - mi történik, ha lassan betölti, vagy egyáltalán nem töltődik be? Az aszinkron adatokkal foglalkozó minden komponensnek logikát kell tartalmaznia, hogy kezelje ezeket a forgatókönyveket.

A "thunk" olyan koncepció, amely segíthet ebben a helyzetben. Mindegyik thunk egy olyan funkció, amely egy másik funkciót ad vissza. Ez a funkció ezután egy későbbi ponton hívható, mint egy visszahívás. Ha egy cselekvési objektum helyett egy thunkot adhatunk ki, akkor hozzáadhatunk egy további logikában egy másik eseményre való reakcióban.

A Redux Thugs olyan könyvtár, amely a küldött cselekvések és a reduktor között ül. Ha látja, hogy egy thunk kerül feladásra, akkor néhány módszert ad a visszaküldött függvénybe, amely további műveletek feladására használható, mint egy siker vagy hiba esemény.

• 20 ragyogó jquery plugins

Ebben a bemutatóban kihasználjuk a Thunks-t, hogy segítsünk az adatokban a kiszolgálón, nem pedig egy JSON fájlból, Photoshare - A Redux által szolgáltatott fénykép-kommentálási alkalmazás.

Van egy új webhelyprojekt, de szükség van arra, hogy maradjon egyszerűen? Itt vannak a legjobb útmutatók a legjobbakhoz weboldal építője és web hosting szolgáltatás. Fájlok megosztása másokkal? Szerezd meg felhő tároló jobb.

Töltse le a fájlokat Ehhez a bemutatóra.

01. Telepítse a függőséget

Ehhez a projekthez két rész van - az elülső véghelyzet és a hátsó végkiszolgáló, amelyen fut. Míg a bemutató az elülső végére összpontosít, szükségünk van egy kiszolgálóra, amely a fényképek elkészítéséhez szükséges. Töltse le a projektfájlokat, és telepítse a függőséget mind a webhely, mind a szerver számára. Futtassa a kiszolgálókat mindkettőhöz, és hagyja őket a háttérben.

 / * egy terminál belül / helyen * /
& gt; fonal
& gt; fonal indítása
/ * egy terminál belül / szerver * /
& gt; fonal
& gt; fonal indítása 

02. Middleware beállítása

A Redux Thunk a middleware - olyan funkciók, amelyek a cselekvések és a reduktorok között vannak, amelyek megváltoztathatják azokat a cselekvéseket. A Redux támogatja a több middleware-t, amely a teljes alkalmazást lefedik. Hozzáadnak, ha a boltot a összeállít módszer. Add hozzá a middleware-t a teremtés módszer az index.js-en belül.

 Import {AppleMidderware, Compose}
a "Redux" -tól;
importálja a "redux-thunk" -t;
[...]
const store = createstore (
rootructorucer,
összeállít(
AlkalmazásMidderware (Thugs),
devtools
)
); 

03. A cselekvési alkotók beállítása

Az első dolog, amit meg kell tennünk, hogy betöltse a fotókat a galériába. Mint a rendszeres cselekvések, szükségünk van a különböző állapotokra, amelyeket az aszinkron hívás meg fog tenni. A legtöbb lesz Rajt , siker és hiba cselekvések. Ezek lehetővé teszik a Redux tudja, mi a JavaScript elfoglalt. Belül Műveletek / fotók / fotók.js , hozzon létre három cselekvési alkotót ezeknek a különböző állapotoknak.

 Export CONST LOADGALLERYSTART = () = & gt; ({
Típus: LOAD_GALLERY_START});
Export CONST LOADGALLERYSUCCESS =
Fotók = & gt; ({
Típus: LOAD_GALLERY_SUCCESS,
fotók
});
export const loadgalererror = () = & gt; ({
Típus: LOAD_GALLERY_ERROR}); 

04. Hozzon létre egy thunk-t a betöltéshez

A Thunks pontosan ugyanaz, mint a cselekvési alkotók. Még mindig elküldjük a visszatérési értéket, de ezúttal egy objektum helyett egy funkciót adunk vissza. A korábban beállított middleware átadási módot ad a visszaküldött függvénybe. Ez lehetővé teszi számunkra, hogy több műveletet küldjön a kezdeti feladás után. Hozzon létre egy loadgallery egy funkciót ad vissza. Most, hogy kiszálljon egy cselekvésre, hogy megmutassa, hogy a galéria még mindig betöltődik.

 Export CONST LOADGALLERY = () = & gt;
Dispatch = & gt; {
küldemény (LOADGALLALLERYSTART ());
}; 

05. Adatok betöltése a szerverről

Most már készen állunk arra, hogy elkezdhessünk a kiszolgáló által létrehozott kiszolgálóból. Ezt használjuk használva tengely - olyan csomag, amelynek célja, hogy különböző böngészőkön keresztül dolgozzon. Importálás tengely és kérjen a képeket loadgallery . Ha az ígéret megszünteti, küldje el a sikertevékenységet, és ha nem küldi el a hibaüzenetet. Ezzel a struktúrája teljes.

 Axios importálása az "axios" -ból;
[...]
visszatérő axios
.get ("http: // localhost: 3001 / Fotók")
.hen (válasz = & gt;
LOADGALLERYSUCCESS (RESPRESSED.DATA)))))
.catch (() = & gt;
LOADGALLALERIERROR ())); 

06. Küldje el a thunk

A thunk nem tesz semmit, amíg nem küldték el. Ezt a reagáló komponensen belül lehet, mint bármely más cselekvés. A képek betöltésének jó ideje, amikor a felhasználó megtekinti a fő galériát. Használhatjuk a reagálást komponensdidmount Lifecycle módszer, mint trigger, a galéria ellenőrzése után még nincs betöltve. Belül Alkatrészek / konténer / galéria / galéria.js eladja a loadgallery akció hozzáadásával MAPDISPatchtoprops és hívja bele komponensdidmount .

 ComponentDIdMount () {
Ha (! This.props.photosloaded) {
this.props.loadgallery ();
}
}
Export CONST MAPDISPATCHTOPROPROWS =
 Dispatch = & gt; ({
LOADGALLERY: () = & gt;
küldemény (LOADGALLERY ()),
}); 

07. Fotók hozzáadása a sikerről

Amikor a képek visszatérnek a szerverről, küldünk a LOAD_GALLERY_SUCCESS Akció a fotókkal. Ezt az államba kell kapnunk a fotók csökkentő. Menekül Csökkentők / fotók / fotók.js és adjunk hozzá egy esetet a sikerhez. A hasznos teher tartalmazza az összes fényképet, mint egy tömb. Miután az állapot frissül, a képválasztó átmegy a fényképeket a megjelenítendő galéria összetevőjébe.

 Case load_gallery_success:
visszatérési akció.kép; 

08. Állítsa be az UI-t

Jelenleg a képek hirtelen megjelennek a betöltések után. Lassabb kapcsolaton a felhasználó egy üres képernyőt néz, amíg a kérés befejeződik, ha valaha is. Az intézkedések küldünk terhelés fotókat is felvette a UI szűkítő annak érdekében, hogy a felület naprakész, mi történik. Frissítse a rakodási és hiba zászlókat az UI reduktoron belül Csökkentők / UI / UI.js .

 Case load_gallery_error:
vissza {... állam,
Betöltés: FALSE, HIBA: TRUE};
Case load_gallery_start:
vissza {... állam,
Betöltés: Igaz, hiba: hamis};
Case load_gallery_success:
vissza {... állam,
Betöltés: FALSE}; 

09. Adja meg a rakodót és a hibaválasztót

Csakúgy, mint a galéria képek magukat, meg kell szelektor, hogy a különböző UI kimondja értékek kívül Redux. Ezeket a galériába tudjuk átadni, amely ezután különböző elemeket fog adni, ha valaki igaz. Ban ben választók / ui / ui.js , Adjon hozzá egy pár funkciót, hogy megkapja az értékeket.

 Export const isgaleryerrored =
 állapot = & gt; state.ui.Error;
export const isgaleryloading =
 állapot = & gt; state.ui.loading; 

10. Adatok hozzáadása a GalériaContainerhez

A választók készen állnak, most már hozzá lehet adni a Képtár konténerkomponens. Hozzáadása azt jelenti, hogy a galéria megjelenítéséért felelős alkatrésznek nem kell tudnia arról, hogy az adatok megérkeztek. Menekül Konténer / galéria / galéria.js és adja hozzá a választékokat térképstatetoprops . Készítsen konstansokat az értékek számára, hogy segítsen megjeleníteni az állapotot a következő lépésben.

 CONST {hiba, betöltés,
 Fotók} = Ez.props;
[...]
Export CONST MAPTATETOTOTOTOTOTOPROPS =
 állapot = & gt; ({
Hiba: IsGalleryErrored (állam),
Betöltés: IsGalleryloading (állam),
 }); 

11. A betöltési és hibaállapot megjelenítése

Miközben a hiba és a betöltési kellékek vannak, jelenleg nincs UI jelezni, ha aktívak. Ezek a kellékek logikai értékek, ami azt jelenti, hogy átkapcsolhatjuk az összetevők megjelenítését, amikor igazak. Frissítse a render módját, hogy megbizonyosodjon arról, hogy a & lt; ERROR & GT; és & lt; rakodás & gt; A galéria helyett a galéria helyett.

 Ha (hiba) {
Visszatérés & lt; hiba / & gt ;;
}
Ha (betöltés) {
Visszatérés & lt; betöltése / & gt;
} 

12. Hozd újra a galériát

A betöltött galériával az egyes fotón továbbléphetünk. Ha rákattint valamely, a kép és az oldal frissítésével nem tölti be a fotót vissza, mivel nincs oktatás ezen az oldalon még betölteni a galériában. Nyisd ki Konténer / fotó / fotó.js és töltse be a galériát komponensdidmount mint a Képtár összetevő. A fotoszervezett Ellenőrizze, hogy ne próbálja meg újra betölteni a képeket, ha már betöltötték a galériába.

 Ha (! Ez.props.photosloaded) {
this.props.loadgallery ();
} 

13. Új megjegyzés hozzáadása

A felhasználó rákattinthat a fotóra, ahová megjegyzést szeretne hagyni. A fotó prezentációs összetevője futtatja a addnewcomment Prop funkció, amikor ez megtörténik. Benne addnewcomment Funkció, kiszámolja azt a pontot, ahol a felhasználó rákattintott a fényképen. A szerver kerek egész számot igényel, ha megmenti.

 CONST PHOTO = E.TARGET
 .getboundingclientrect ();
const top = e.clientx - photo.left;
const bal = e.clienty - photo.top;
const toppc = math.round ((felső /
 photo.width) * 100);
const balpc = math.round ((balra /
 fotó.height) * 100); 

14. Mondja meg újra a megjegyzést

A kiszámított pozícióval meg kell mondanunk Redux-t a megjegyzésről, így megjelenítheti a megjegyzés űrlapot. Már van egy művelet, amely hozzáadhatja az új megjegyzést a képernyőn. Hozzáad addnewcomment -ba MAPDISPatchtoprops és hívja fel, miután kiszámítottuk a kattintás helyzetét.

 Ez.props.addnewcomment (
 toppc, balpc);
[...]
Export CONST MAPDISPATCHTOPROPROWS =
 Dispatch = & gt; ({
addnewcomment: (felső, balra) = & gt;
(addnewcomment (felső, bal),
});

15. Mondja el az új megjegyzésről

Amikor új megjegyzés információt adnak át a Redux-nak, át kell adnunk a fotó prezentációs összetevőjébe. Ez lehetővé teszi, hogy megmutassa az űrlapot ebben a helyzetben. Találd meg getnewcomment választó, add hozzá térképstatetoprops és átadja a propot & lt; fotó & gt; .

 Export CONST MAPStateToprops =
 (állam, kellékek) = & gt; ({
Újdonság: Getnewcomment (állam),
});
& lt; Photo [...] újdonság = {
 this.props.Newcomment} / & gt; 

16. Hívja a Thugs-t

A fotóra kattintva most hozza fel az új megjegyzésformákat. Ez a saját csatlakoztatott összetevője. Amikor az űrlapot benyújtják, hívja a elkülönítés Prop funkció és elhalad. Ez egy thunk, amit fogunk tenni. Nyit Konténer / újdonság / újdonság.js és add hozzá a thunk-t MAPDISPatchtoprops . Átadja ezt a propot a renderelt bemutató komponensbe.

 & LT; újdonság [...]
 submitcomment = {submitcomment} / & gt;
Export CONST MAPDISPATCHTOPROPROWS =
 Dispatch = & gt; ({
Külddendő: megjegyzés = & gt; Elküldés(
Külddendő (megjegyzés))
});

17. Gyűjtse össze a tartalmat a Thunk számára

A thunk hozzá egy új hozzászólást hasonló a szerkezete a beolvasásakor a galéria, beleértve a kezdet, a siker és a hiba akció. Van egy extra argumentum, amelyet a Thunk - a getstate funkció. Ez lehetővé teszi a jelenlegi állapot közvetlen hozzáférését annak érdekében, hogy megragadja az adatokat. Hozza létre elkülönítés thunk Műveletek / Újdonság / Újdonság.js . Minden megjegyzés egy fényképhez és felhasználóhoz kapcsolódik. Ehhez a bemutatóhoz a felhasználói azonosító kemény kódolva van a felhasználó csökkentő.

 Export Const Submitcomment = megjegyzés
 = & gt; (feladás, getstate) = & gt; {
küldés (submitcommentstart ());
CONST CEALTHEPHOTOID =
getcurrentphotoid (getstate ());
const felhasználó =
getcurrentuser (getstate ());
const {bal, felső} =
getnewcomment (getstate ());
}; 

18. Tegye közzé a kérést

A szükséges adatokkal a megjegyzést elküldhetjük. Axiosnak van a posta módszer kezelésére Posta Kérelmek, a második érv az adatok küldéséhez szükséges adatok. Adja hozzá a kérelmet a thunknak, átadja az adatokat a kígyó tokban, hogy megfeleljen a kiszolgálónak.

 Visszatérő axios
.post (
"http: // localhost: 3001 / megjegyzések", {
USER_ID: User.Id,
Photo_ID: aktuális fotoid,
megjegyzés,
bal,
top
}) 

19. Kezelje a sikert és a hibát

Ha az axios ígérete megoldja vagy elutasítja, meg kell mondanunk az alkalmazásról. Ha sikeresen megoldódik, a kiszolgáló átadja a megjegyzés tartalmát. Ezt a sikeres cselekvéssel kell átadnunk. Ha elutasít, tűz hibás akciót. Frissítse az ígéretet azután és fogás blokkok.

 .Then (({adatok: {
 ID, megjegyzés, bal, felső}}) = & gt;
Elküldés(
Küldje átruházat (
ID, Comment, Bal, Top, Top,
Felhasználó, aktuális fotoid)
)
)
.catch (() = & gt;
 submitcommentError ())); 

20. Adjon hozzá megjegyzést a fotóhoz

Most, miután a megjegyzés sikeresen hozzáadódik, a képernyőről törlődik, de az oldal frissüléséig nem látható. Mi lehet frissíteni a fotókat szűkítő, hogy vegye fel az új megjegyzést, és add meg észrevételeit tömb, a kijelző, mint a többiek. Nyissa meg a Reducer / Photos / Photos.js-t, és adjon hozzá egy esetet az akció kezeléséhez. Hozzon létre egy másolatot az állam számára, hogy megbizonyosodjon arról, hogy véletlenül nem mondjuk meg a meglévő állapotot.

 Submit_comment_success:
CONST {ID, Comment, Top, Bal,
Felhasználó, PhotoID} = action.Payload;
CONST NEWSTATE = JSON.PARSE (
Json.stringify (állam));
const photo = newstate.find (
Fotó = & gt; photo.Id === PhotoID);
Photo.comments.push ({
ID, megjegyzés, bal, felső, felhasználó
});
Visszatérés Newstate; 

21. Más megjegyzések elrejtése

Végül, ha egy másik megjegyzés nyitva van, és a felhasználó új megjegyzést szeretne hozzáadni, az UI túlságosan zsúfolt. El kell rejtenie a megjegyzéslapot, ha új megjegyzés található. Tudunk összekapcsolni a meglévő Add_new_comment cselekvés a kommentár érték. Menekül Redukasztó / UI / UI.js és adjon hozzá egy esetet.

 Case Add_New_comment:
Visszatérés {
...állapot,
Commentopen: Nincs meghatározva
}; 

Ezt a cikket eredetileg a Creative Web Design magazin 283. kiadásában tették közzé Web designer . Itt vásároljon 283 kérdést vagy Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

• 5 félelmetes JavaScript API-k
• Újrahasználható reagálható komponensek kifejlesztése
• 9 a legjobb JavaScript keretrendszerek közül