Sådan forstås reduktorer: Du kan bruge dem uden redux

TLDR: Du kan håndtere tilstand med en reducering i dine klassekomponenter ved at have en funktion, der oversætter handlinger til tilstandsændringer. Det centraliserer alle dine setStates.

? Hvad er en Reducer?

Reducere er funktioner, der tager input og beslutter, hvad de skal gøre med det på et centralt sted. Det er det. ?

Hvis du har en funktion, der bestemmer den visning, der skal vises baseret på en URL, er det en reducering.

Redux Reducers ™ ️ er en bestemt anvendelse af reduceringsanordninger, der fortolker begivenheder i din applikation, og hvordan det ændrer applikationstilstand.

Hvis du ikke er bekendt med Redux, starter ovenstående eksempel normalt ved at kalde en dispatchfunktion med et action(objekt der beskriver en begivenhed). ?

Vi kan bruge reduktionsgear lige nu i en klassekomponent ved at oprette en funktion, der håndterer indstilling af tilstanden efter en handlingstype som sådan:

Brug af en reducering i dette enkle eksempel er efter min mening overdreven. Jeg er glad for, at React vil levere både a useStateog useReducerhook af den grund.

Hvis jeg bemærkede, at jeg gik forbi måder at ændre tilstanden på og countblev kombineret med nogle få flere tilstandsegenskaber, ville jeg skifte til en reducering.

Da Redux sætter al sin tilstand i et objekt, der vokser hurtigt, gør det reduceringsmønsteret perfekt. Det er muligt at fjerne reduktionsgear fra Redux, selvom vi mister masser af fantastiske funktioner.

Redux giver dig connectdin globale butik til din komponent. Du kan oversætte tilstand til rekvisitter. De giver også en dispatchfunktion, der udløser dine reduktionsgear.

I stedet for at videregive en dispatchfunktion, lad os videregive en updatefunktion, der fungerer som setState.

? Oprettelse af en dårligere version af Redux

Når du ringer til opdatering, siger du nøjagtigt, hvordan staten skal ændre sig. Det kan eller ikke være ved siden af ​​andre lignende tilstandsændringer.

Med en lille nok tilstand føles dette faktisk pænt og koncist. Hvis vi havde 5 eller flere komponenter, der ændrede nogle få tilstandsegenskaber, ville det være svært at finde kilden til fejl. ? ?

Selv uden at ændre redux overhovedet, kan du efterligne dette mønster. Afsendelse af handlinger, der ligner, SET_COUNTer tip, vi virkelig bare vil have setState. Det er den nemme ting at gøre.

Hvis vi opretter en mindre meningsfuld handling, som INCREMENT_BUTTON_CLICKEDvi kunne bruge den i mange reduceringsanordninger, og handlingsnyttelasten ville ikke variere for meget.

? Reduktionsmidler er nyttige i mere end staten

Reduktionsmidler er en fantastisk måde at samle beslutninger på. Hvis du har arbejdet med react-router-4 før, skal ovenstående kode se ret bekendt ud.

Tak til /> 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.