Vodič za početnike za Redux

Razumijevanje Reduxa kao početnika može biti prilično zbunjujuće. Redux ima obilje novih pojmova i koncepata koji su često prilično neintuitivni. Ovaj vodič predstavlja vrlo pojednostavljeni primjer implementacije Reduxa. Definirat ću svaki od koraka i pojmova na način koji ima smisla za potpunog početnika.

Ovo je namijenjeno vodiču za demistifikaciju Redux elemenata. Ne sadrži tehnički najtočnije definicije. Nema najbolje prakse ikad. Ima definicije koje će pomoći razviti razumijevanje za nekoga tko prethodno ne poznaje te koncepte. Jednostavna je primjena kako se ne bi brkali s nepotrebnim detaljima.

Primjer koji ćemo proći u ovom vodiču bit će jednostavna todo aplikacija. Aplikacija omogućuje korisniku dodavanje ili uklanjanje zadataka i njihovo prikazivanje na stranici.

Provest ću korak po korak svaki element Reduxa, objašnjavajući što je taj element i kako ga primijeniti na primjerima koda. Pomaknite se na dno da biste vidjeli cjeloviti primjer koda koji će pokazati kako se sve to uklapa u kompletnu React aplikaciju.

Sažetak koraka

  1. Napišite funkciju reduktora
  2. Instancirajte trgovinu u korijenskoj komponenti
  3. Zamotajte komponente komponentom, prolazeći u trgovini kao rekvizit
  4. Napišite komponentu
  5. Definirajte radnje
  6. Definirajte depešu, priložite je tamo gdje će se depeše aktivirati (tj. Slušatelji događaja itd.)
  7. Definirajte funkciju mapStateToProps
  8. Izvezite funkciju povezivanja, prosljeđujući mapStateToProps i null kao 2 argumenta i prenoseći ime komponente u drugi par zagrada

Koraci

1. Napišite funkciju reduktora

Funkcija reduktora je funkcija koja govori trgovini kako odgovoriti na radnje. Funkcija vraća novo i ažurirano stanje kad god se pošalje radnja. Stanje je nepromjenjivo (ne može se mijenjati) pa reduktor uvijek vraća novo stanje. Reduktor obično koristi operator širenja za umetanje trenutnog stanja u novi objekt / polje i njegovo dodavanje. Uobičajena je praksa koristiti naredbu switch / case i provjeriti svojstvo tipa predane akcije. Zatim napišite kôd koji ažurira stanje za svaki slučaj.

Prvo napišemo svoju funkciju reduktora jer ćemo je trebati proslijediti kada napravimo instancu naše trgovine. Da biste razumjeli što se događa, potrebno je određeno znanje o radnjama i otpremi. O ovome ćemo govoriti dalje u ovom vodiču.

Za sada znajte da će naša aplikacija za zadatke trebati komunicirati s trgovinom na dva načina: da biste dodali novu stavku zadataka u stanje i uklonili stavku zadataka iz države. Stoga svoju funkciju pišemo tako da odgovara na 2 slučaja vrste radnje. Koristi vrijednost radnje za dodavanje ili uklanjanje stavke zadataka iz stanja.

Reduktoru se prosljeđuju 2 parametra: stanje (ovo je cijelo stanje trenutno u spremištu, a mi mu dajemo zadanu vrijednost ako stanje još ne postoji) i akcija. Vraćamo stanje u zadanom slučaju.

2. Instancirajte trgovinu u korijenskoj komponenti

Trgovina je stvar koja zapravo sadrži stanje u sebi. Pomalo je čarobno i zapravo ne trebate znati detalje i nedostatke. Sve što trebate znati je da mu ne pristupate izravno kao da biste normalno reagirali. Pristupite mu i napravite izmjene pomoću reduktora, radnji i slanja.

Druga važna stvar koju treba znati o trgovini je da ona sadrži neke korisne i važne metode. Glavna metoda je funkcija otpreme. Sadrži i metodu getState (za pregled stanja) i metodu pretplate (pokreće povratni poziv svaki put kad se pošalje radnja).

Trgovina je obično instancirana u korijenu vaše aplikacije (npr. App.js). Pohranjuje se kao varijabla i kao parametar predaje reduktor. Trgovina se zatim predaje kao potpora komponenti Provider.

Instanciramo naš objekt spremišta ulazeći u reduktor koji smo upravo kreirali.

3. Zamotajte komponente komponentom, prolazeći u trgovini kao potporanj

Pružatelj je komponenta stvorena kako bi olakšala prosljeđivanje trgovine svim vašim komponentama. Komponenta dobavljača obavija se oko svih komponenata (npr. Generira komponente kao podređena dobavljača). Trgovinu predajete kao rekvizit samo dobavljaču. To znači da ne morate u prodavaonicu dodavati svaku komponentu jer je svaka komponenta dobiva od dobavljača. Međutim, to ne znači da komponente još imaju pristup državi. Još uvijek trebate koristiti mapStateToProps (to ćemo pokriti kasnije) kako bi stanje bilo dostupno u vašoj komponenti.

Komponentu Todo koju ćemo izraditi omotavamo komponentom našeg dobavljača. Prolazimo u trgovinu koju smo stvorili u prethodnom koraku.

4. Napišite komponentu

Dalje započinjemo s pisanjem komponente Todo koja će prikazati stavke zadataka i komunicirati s trgovinom Redux.

Komponenta je komponenta sa statusom koja sadrži jedan element stanja za praćenje onoga što je korisnik upisao u ulaz. Imamo funkciju koja se naziva handleChange. Ova funkcija ažurira stanje svaki put kada korisnik nešto upiše u ulaz. Zasad je ovo sve što ćemo napisati. Moramo razumjeti više o Reduxu prije nego što napišemo logiku. Logika će državi dodati nove zadatke i iz države dohvatiti trenutne za prikaz na stranici.

5. Definirajte radnje

Akcija je jednostavan objekt koji sadrži svojstvo koje se naziva 'tip'. Ovaj se objekt prenosi u funkciju otpreme. Koristi se da prodavaonici kaže koji se događaj upravo dogodio (čitanjem svojstva tipa akcije). Također govori koje ažuriranje treba izvršiti stanju kao odgovor (putem funkcije reduktora). Akcija može sadržavati i druga svojstva za bilo koje druge podatke koje želite proslijediti u reduktor. Podaci se mogu prenositi samo ovdje, tako da će svi potrebni podaci trebati biti proslijeđeni ovdje.

Za definiranje svojih radnji koristit ćemo kreatore akcija. Kreatori radnji su funkcija koja vraća objekt radnje. Njegova je svrha učiniti akciju prijenosnijom i provjerivijom. To ne mijenja ponašanje kako bilo što funkcionira. To je još jedan način pisanja i donošenja radnje. Također vam omogućuje prosljeđivanje parametara ako želite poslati podatke s radnjom koju ćemo poduzeti. Stoga ovdje trebamo koristiti kreatore akcija.

Ako se sjećate, naš reduktor je odgovorio na 2 vrste radnji - "ADD_TODO" i "REMOVE_TODO". Te ćemo akcije definirati s našim kreatorima akcija. U našoj add_todo akciji vratit će se "ADD_TODO" kao vrsta i stavka zadataka koju želimo dodati u trgovinu kao vrijednost (trebamo da trgovina doda ovu stavku zadataka u stanje kako bi se ovdje unijelo). U remove_todo vraćamo “REMOVE_TODO” kao vrstu, a indeks stavke zadataka u trgovini kao vrijednost. Trebat će nam da ga uklonimo s popisa zadataka.

Ako se vratite našoj definiciji funkcije reduktora, nadamo se da to sada ima više smisla. Čitajući action.type reduktor zna treba li dodati zadatak u stanje ili ga ukloniti iz njega. Ima stavku todo koja je proslijeđena u add_todo. Dodaje se na trenutno stanje pomoću operatora širenja. U remove_todo koristi operator širenja za stvaranje novog niza koji dodaje trenutno stanje izrezano dva puta, jednom sa svim elementima prije onog za uklanjanje i drugo sa svim elementima nakon onoga za uklanjanje, stvarajući tako naš novi objekt stanja s predmet je uklonjen.

Međutim, ovo još uvijek nije cjelovita slika. Još nismo objasnili kako se reduktor poziva i prosljeđuje u ispravnoj akciji. Za to ćemo morati prijeći na definiranje naše funkcije slanja.

6. Definirajte depešu, priložite je tamo gdje će se depeše aktivirati (tj. Slušatelji događaja itd.)

Funkcija otpreme metoda je pohrane koja se koristi za pokretanje promjene stanja. Bilo koji događaj ili bilo što što treba ažurirati stanje mora pozvati metodu otpreme da bi to učinili. To je jedini način da se pokrene promjena / ažuriranje stanja. Poziva se otprema i predaje se objekt radnje (ili kreator akcije ako je to korišteno). Jednom kada se dispečeri pokrene, trgovina tada poziva funkciju reduktora i prelazi u akciju koju je dispečer ponudio, a koja ažurira stanje, kao što smo vidjeli ranije.

U nastavku definiramo donju polovicu naše metode prikaza komponenata. Izrađujemo svoje gumbe koji će sadržavati naše voditelje događaja. Unutar njih definirat ćemo svoje funkcije otpreme.

Prvi gumb je jednostavan gumb za dodavanje. Ovaj će gumb poslati radnju add_todo u trgovinu. Proći će u trenutnom korisničkom unosu kao vrijednost (ovo je stavka zadataka koju reduktor dodaje u novo stanje). Napomena nazivamo otpremu kao this.props.dispatch. Malo je izvan opsega ovog vodiča da bismo shvatili kako i zašto to prolazi kao oslonac za komponentu. Dakle, samo znajte da jest i možemo to nazvati ovako.

Drugi rukovatelj događajima napisan je kao onClick na našu prikazanu stavku zadataka. Klikom na bilo koju stavku na stranici pokreće se rukovatelj događajima. Voditelj događaja pretražuje popis zadataka i pronalazi indeks tog zadatka na popisu. Zatim šalje akciju remove_todo i prosljeđuje u indeks.

Sada je u potpunosti definiran ciklus ažuriranja stanja u trgovini Redux. Znamo da u bilo kojem trenutku kada želimo promijeniti stanje trebamo nazvati metodu otpreme, proslijediti odgovarajuću akciju i osigurati da naš reduktor obrađuje te radnje i vraća novo stanje koristeći bilo koje vrijednosti koje smo unijeli kroz akciju.

Jedini dio slagalice koji sada nedostaje je kako dobiti stanje iz trgovine Redux. Vjerojatno ste primijetili da sam mapirao popis nazvan this.props.todosu prethodnom primjeru. Možda se pitate odakle to. Također se možete sjetiti da sam na početku ovog vodiča spomenuo da prelazak trgovine u komponentu Provider nije dovoljan za pristup stanju u trgovini. Sve ovo rješava se u sljedeća 2 koraka dok definiramo našu funkciju mapStateToProps i prenosimo je u funkciju povezivanja.

7. Definirajte funkciju mapStateToProps

Kada želite da vaša komponenta ima pristup stanju, morate izričito navesti u kojem će stanju komponenta dobiti pristup. Vaša komponenta bez toga neće imati pristup stanju.

mapStateToProps je funkcija koja jednostavno vraća objekt koji definira koje stanje treba prenijeti u komponentu dodjeljivanjem vrijednosti u stanju svojstvima koja definirate u ovom objektu. U osnovi je objekt koji vratite u mapStateToProps ono što će vaši rekviziti biti u vašoj komponenti. Funkcija mapStateToProps prenosi se u metodu povezivanja kao prvi argument.

MapStateToProps uzima cijelo stanje kao parametar, a vi iz njega uzimate samo ono što vam treba. Ovdje, premda naša država sadrži samo popis zadataka. Treba nam taj popis u našoj ToDo komponenti, vratit ćemo cijelu državu kao svojstvo zvano todos.

Kao što sada možete vidjeti, u našim rekvizitima imamo pristup cijelom našem popisu zadataka kao this.props.todos. Tako smo mogli prikazati sve svoje zadatke u prethodnom primjeru mapiranjem preko njega.

Konačno, ovu funkciju moramo prenijeti u našu metodu povezivanja kako bismo sve povezali.

8. Izvezite funkciju povezivanja, prosljeđujući mapStateToProps i null kao 2 argumenta i prenoseći ime komponente u drugi par zagrada

Povezivanje je metoda koja povezuje funkcije mapStateToProps i mapDispatchToProps (vidi dolje) s vašom komponentom tako da trgovina može čitati te funkcije i osigurati da ono što ste tamo definirali pređe u komponentu kao rekviziti. Ova metoda ima posebnu sintaksu koja izgleda ovako:

connect(mapStateToProps, MapDispatchToProps)(YourComponent)

Prenosite 2 map...ToPropsfunkcije na connect, a zatim naziv vaše komponente unutar drugog para zagrada. Tipičan obrazac je izvoz metode povezivanja umjesto komponente kada izvozite komponentu na kraju datoteke. Na primjer:

export default connect(mapStateToProps, MapDispatchToProps)(YourComponent)

To se ponaša na isti način kao i uobičajeni izvoz, osim stanja i pošiljke će se prosljeđivati ​​kao rekviziti. mapStateToProps i mapDispatchToProps zapravo su neobavezni paramoni za povezivanje. Ako ne želite proći niti jedno, niti jedno, umjesto toga stavite null.

Možda se pitate odakle dolazi ova funkcija mapDispatchToProps i zašto je ovdje nigdje prije nismo spomenuli. Pa, budući da je ovaj vodič najjednostavniji primjer trgovine Redux i mapDispatchToProps nije strogo obvezan, nisam ga uključio u naš primjer. Ako ne proslijedite mapDispatchToProps i umjesto toga proslijedite nulu, i dalje možete pristupiti funkciji otpreme u vašoj komponenti kao što smo to imali ranije kao this.props.dispatch.

Dakle, da bismo dovršili našu primjernu aplikaciju, sve što moramo učiniti je izvesti našu komponentu omotajući je funkcijom povezivanja i predajući upravo definirani mapStateToProps.

I to je to! To je potpuna implementacija Redux trgovine. U nastavku pogledajte radni primjer onoga što smo primijenili.

Primjer cijelog bilježnog koda

App.js Todo.js

Nadam se da ovaj vodič može pojednostaviti neke neobične i ponekad zbunjujuće detalje Reduxa. To nije cjeloviti vodič za Redux, jer definitivno postoji više elemenata i uzoraka koje treba razumjeti. Ali ako razumijete ovaj vodič, na dobrom ste putu da možete surađivati ​​i instalirati Redux u svoje aplikacije.