Ovaj će članak proći kroz pregled Redux-Logike na visokoj razini. Pogledat ćemo što je to, zašto je potrebno, po čemu se razlikuje od drugog Reduxovog međuopreme i zašto mislim da je to najbolji izbor. Tada ćemo vidjeti primjer jednostavne vremenske aplikacije koja će pokazati kako se temeljni koncepti primjenjuju u praksi.
Ovaj članak pretpostavlja da dobro razumijete React i Redux.
Brzo osvježavanje na Reduxu
Redux je državni spremnik za JavaScript aplikacije i često se koristi s Reactom. Pruža centralno mjesto za pohranu podataka koji se koriste u vašoj aplikaciji. Redux također pruža okvir za stvaranje predvidljivih mutacija stanja. Korištenje Redux-a olakšava pisanje, razumijevanje, uklanjanje pogrešaka i skaliranje dinamičkih aplikacija na temelju podataka.
U Reduxu komponente pozivaju kreatore akcija koji otpremaju radnje . Akcije su (obično!) Mali obični predmeti koji izražavaju namjeru ili uputu. Akcije mogu sadržavati i "korisni teret" (tj. Podatke).
Stanjem aplikacije upravljaju reduktori . Zvuče složenije nego što jesu! Djelovanjem se upravlja root-reduktor koji zatim prosljeđuje radnju i korisni teret određenom reduktoru. To reduktor će uzeti kopiju od primjene države, mutiraju na primjerak (prema akciji i njegovom nosivošću), a zatim ažurirati stanje u primjeni Store .
Zašto potreba za Redux Logic?
Prema zadanim postavkama, sve radnje u Reduxu šalju se sinkrono. Ovo predstavlja izazov za bilo koju aplikaciju koja mora podržavati asinkrono ponašanje, poput dohvaćanja podataka iz API-ja ... tako da gotovo bilo koja aplikacija!
Da bismo obrađivali ponašanje asinkronizacije pomoću Reduxa, potrebna nam je neka vrsta međuopreme koja vrši određenu obradu između trenutka kada se radnja pošalje i kada radnja dođe do reduktora. Postoji nekoliko popularnih knjižnica za pružanje ove funkcije.
Nakon istraživanja različitih mogućnosti, već neko vrijeme koristim Redux-Logic u raznim projektima i otkrio sam da je sjajan!
Redux-Logic životni ciklus
Redux-Logic nudi međuoprema koja izvodi određenu obradu između trenutka kada se radnja pošalje iz komponente i kada radnja dosegne reduktor.
Za izradu 'Logike' koristimo biblioteku redux-logika. To su u osnovi funkcije koje presreću određene radnje običnog objekta , izvode asinkronu obradu, a zatim otpremaju drugu običnu objektnu radnju. Logičke funkcije su stvarno deklarativne i fleksibilne, kao što ćemo vidjeti!
Ovdje je važno ukloniti da su sve radnje s kojima Redux-Logic radi obični objekti . Akcija koju šalje komponenta korisničkog sučelja i akcija koju zatim šalje logika uvijek će biti običan objekt (za razliku od, na primjer, funkcije). Ponovno ćemo to posjetiti u nastavku kada usporedimo različite opcije međuopreme.
Ispod haube, Redux-Logic koristi 'vidljive' i reaktivno programiranje. Više o tome pročitajte ovdje.
Protok podataka
Ispod, za usporedbu, nalazi se dijagram koji sam stvorio i prikazuje važne točke u životnom ciklusu sinkronog procesa redukcije. Nije uključen međuprodukt (jer nije potreban!).
Sada je ovdje dijagram koji prikazuje važne dijelove projekta koji koriste biblioteku redux-logika za obradu asinkronih radnji. Ovo će biti korisno pozvati kasnije, uz primjer u nastavku.
Možete vidjeti kako posrednički softver djeluje između slanja radnje i kada njome upravlja reduktor.
Glavne razlike od ostalih rješenja
Redux-Thunk popularan je izbor za međuprodukt Redux koji vam također omogućuje podršku asinkronog ponašanja. Da bi se bavili asinkronim ponašanjem pomoću Redux-Thunka, kreatori vaših radnji moraju vratiti funkcije za razliku od vraćanja običnih objekata s Redux-Logic. Vjerujem da otpremanje običnih objekata pomoću Redux-Logic čini vaš kod mnogo lakšim za pisanje i puno lakšim za razumijevanje.
Nadalje, vjerujem da se pristup "običnog objekta" za rukovanje asinkronim ponašanjem prirodnije uklapa u ostatak (sinkrone) Redux arhitekture, što ovaj međuprodukt čini organskim uklapanjem u Redux.
Još jedan popularni međuproizvod Redux je Redux-Saga . Kad sam pogledao ovu opciju, krivulja učenja zaobilaženja saga (relativno nova ES6 značajka) pronašla sam prilično strmu. To bi se složilo ako želite uvesti ovu knjižnicu u aplikaciju kojom upravlja tim s nekoliko ljudi. Uz to, mislim da ako sa njima ne upravlja dobro, sage mogu stvoriti kod složenog izgleda u usporedbi s logikom koju kreirate redux-logikom. To može utjecati na brzinu razvoja i održivost koda.
Pregled primjera
Ispod su jednostavni isječci iz jednostavne React aplikacije koja može dohvatiti trenutne vremenske prilike u gradu i predstaviti ih korisniku. Primjer koristi Redux-Logic za podršku asinkronog ponašanja za dohvaćanje podataka pomoću besplatnog API-ja OpenWeatherMap.
Za usporedbu, uključio sam sinkroni postupak Redux koji prikazuje broj zahtjeva koje je korisnik uputio.
Evo izvornog koda.
Postavljanje razvojnog okruženja
Ovo su naredbe koje sam pokrenuo da bih započeo izradu svoje aplikacije:
npx create-react-app appnpm install --save reduxnpm install --save react-reduxnpm install --save redux-logicnpm install --save axiosA da biste vidjeli aplikaciju:
npm startSretan što sam mogao vidjeti zadanu početnu stranicu Create React App na localhost: 3000 , tada sam počeo pisati neki kod!
Ispod su isječci koda koji pokazuju važne točke o integraciji Redux-Logic-a u projekt.
Dodavanje međuopreme u našu Redux trgovinu
U appStore.js , da ne koristimo nikakav međuopreme , obično bismo svoj root root reduktor osigurali samo za createStore metodu. Ovdje povezujemo naš Redux-Logic posrednički softver s ostatkom naše aplikacije.
Naveli smo da želimo koristiti aksio kao klijenta za izradu HTTP zahtjeva.
Zatim koristimo metodu iz redux-logike za izradu našeg međuopreme i na kraju ga dodajemo kao parametar u metodu createStore. To znači da će naš Redux kôd moći pristupiti našem međuprogramu. Sjajno!
Otpremanje asinkronih radnji
S Redux-Logic, radnje koje pokreću asinkrono ponašanje šalju se na isti način kao i akcije koje pokreću sinkronizirano ažuriranje stanja. Nema ništa drugačije!
Za potpunost, u nastavku možete vidjeti da kada korisnik klikne na gumb, nazivamo tvorca radnji koji je našoj komponenti proslijeđen kao rekviziti.
Presretanje asinkronih radnji
Tu prvi put vidimo pojavu redux-logičkog međuprograma koji dolazi u igru. Koristimo biblioteku redux-logika za stvaranje neke 'logike' koja će presresti određene radnje.
U svojim Logičkim svojstvima kažemo redux-logici koju akciju želimo da presreće. Navedemo da želimo da redux-logika pruža podatke samo iz posljednje radnje ove vrste koju je komponenta poslala. U našem primjeru ovo je deklarativno ponašanje korisno ako ljudi nastave kliktati gumb jer će dobiti vrijednost iz najnovije akcije koju su poslali, a ne nužno i posljednjeg obećanja da će se vratiti!
Dalje specificiramo da kad se asinkroni proces vrati, odmah otpremimo jednu od dvije radnje. Ako se obećanje vratilo, vratit ćemo akciju GET_WEATHER_FOR_CITY_SUCCESSFUL . To je ono što želimo!
Ako je obećanje vraćeno, odbacujemo GET_WEATHER_FOR_CITY_FAILURE .
Ovdje redux-logika zaista blista . Jasno je koja je namjera logičkog koda, a ono što se emitira jednostavni su objekti koji se lako čitaju i tumače! Smatram da je ovo zaista lako pročitati, razumjeti i ispraviti pogreške.
Na dnu jasno stavljamo do znanja što želimo da čini naš asinkroni postupak. Želimo vratiti vrijednost obećanja. Primijetite kako u URL prenosimo korisni teret koji je došao s našom radnjom.
Obrada asinkronih radnji
Iz reduktora weatherDataHandling.js možete vidjeti da se radnje otpremljene iz naše logike tretiraju kao obične radnje objekta. Reduktori mutiraju stanje na isti način kao kod sinkronih radnji . Dakle, snimka zaslona u nastavku ono je što biste očekivali od rada s Reduxom prije. Super!
Sažetak
Redux je popularni predvidljivi spremnik stanja za JavaScript aplikacije. Prema zadanim postavkama sve radnje Redux podržavaju samo sinkrono ponašanje, a za asinkrono ponašanje trebat će vam neka vrsta međuopreme.
Redux-Logic pruža jasan i moćan međuoprema koji vam omogućuje upotrebu asinkronih radnji u vašoj aplikaciji Redux. Dodajete svoj međuprodukt u svoju Redux trgovinu kako biste svojoj aplikaciji omogućili upotrebu Redux-Logic. Za izradu logike koristite biblioteku redux-logika koja presreće određene radnje i otprema daljnje radnje nakon što se završi neka asinkrona obrada (poput dohvaćanja podataka iz API-ja).
Sve uključene radnje su obične objektne radnje. Vjerujem da je zbog toga lakše pisati i lakše razumjeti u usporedbi s drugim rješenjima. Nadalje, redux-logika se čini organskijim uklapanjem s ostalim dijelovima Redux arhitekture.
Hvala na čitanju, pozdravljam komentare ili pitanja u nastavku!