Kako razumeti reduktorje: Lahko jih uporabljate brez Reduxa

TLDR: Stanje lahko urejate z reduktorjem v komponentah razreda, tako da imate eno funkcijo, ki dejanja pretvori v spremembe stanja. Centralizira vse vaše setStates.

? Kaj je reduktor?

Reduktorji so funkcije, ki sprejmejo vhod in se na enem osrednjem mestu odločijo, kaj bodo z njim storile. To je to. ?

Če imate funkcijo, ki na podlagi URL-ja določi prikaz pogleda, je to reduktor.

Redux Reducers ™ ️ so posebna uporaba reduktorjev, ki interpretirajo dogodke v vaši aplikaciji in kako to spremeni stanje aplikacije.

Če niste seznanjeni z Reduxom, se zgornji primer običajno začne s klicanjem dispatchfunkcije z action(objekt, ki opisuje dogodek). ?

Zdaj lahko uporabimo reduktorje v komponenti razreda tako, da ustvarimo funkcijo, ki obravnava nastavitev stanja glede na vrsto dejanja:

Po mojem mnenju je uporaba reduktorja v tem preprostem primeru pretirana. Vesel sem, da bo React iz tega razloga zagotovil oba useStatein useReducerkljuko.

Če bi opazil, da prenašam načine za spreminjanje stanja in countbi me povezalo še nekaj lastnosti države, bi prešel na reduktor.

Ker Redux vse svoje stanje postavi v en predmet, ki hitro raste, je vzorec reduktorja popolnoma primeren. Iz Reduxa je mogoče odstraniti reduktorje, čeprav bi izgubili veliko izjemnih funkcij.

Redux vam omogoča connectglobalno shranjevanje vaše komponente. Stanje lahko prevedete v rekvizite. Zagotavljajo tudi dispatchfunkcijo, ki sproži vaše reduktorje.

Namesto da posredujemo dispatchfunkcijo, podajmo updatefunkcijo, ki deluje podobno setState.

? Ustvarjanje slabše različice Reduxa

Ko pokličete posodobitev, pravite, kako naj se stanje spremeni v vrstici. Lahko je ali pa tudi ne ob drugih podobnih spremembah stanja.

Ob dovolj majhni državi je to dejansko lepo in jedrnato. Če bi imeli 5 ali več komponent, ki bi spremenile nekaj lastnosti države, bi težko našli vir napak. ? ?

Tudi brez spreminjanja reduksa lahko posnemate ta vzorec. Pošiljanje dejanj, ki so videti, SET_COUNTso namigi, ki si jih v resnici le želimo setState. To je enostavno narediti.

Če ustvarimo manj samozavestno akcijo, kot INCREMENT_BUTTON_CLICKEDbi jo lahko uporabili v številnih reduktorjih, koristna obremenitev akcije se ne bi preveč razlikovala.

? Reduktorji so uporabni za več kot državo

Reduktorji so odličen način za odločanje. Če ste že delali z reakcijskim usmerjevalnikom-4, bi morala biti zgornja koda videti precej znana.

Zahvaljujoč /> component, we can nest these route-view reducers anywhere.

Now if someone has the question “What are all the ways the URL can change what renders”, they have one central place to look.

? Summing It Up

  1. Reducers as a pattern exist outside of Redux and Javascript and are simple to implement. They have one single responsibility of taking input and giving output.
  2. Redux Reducers turn app events into state. You don’t need Redux to do this now, you can do it with local component state.
  3. Reducers make it easy to organize and find different variations of what can happen in the code and are useful as apps grow large.

If you have any questions or are looking for one-on-one React mentorship, feel free to tweet me @yurkaninryan any time!

If you like my writing style, here are some other articles that I’ve done.