Hogyan lehet megérteni a reduktorokat: Redux nélkül is használhatja őket

TLDR: Az osztály összetevőinek csökkentőjével kezelheti az állapotot egy olyan funkcióval, amely a műveleteket állapotváltozásokká alakítja. Központosítja az összes setState-t.

? Mi az a reduktor?

A reduktorok olyan funkciók, amelyek bemenetet vesznek fel, és egy központi ponton eldöntik, hogy mit kezdjenek vele. Ez az. ?

Ha van olyan funkciója, amely az URL alapján meghatározza a megjelenítendő nézetet, akkor az egy kicsinyítő.

A Redux Reducers ™ a reduktorok speciális alkalmazása, amelyek értelmezik az alkalmazás eseményeit, és hogyan változtatják meg az alkalmazás állapotát.

Ha még nem ismeri a Redux-ot, akkor a fenti példát általában úgy indítja el, hogy egy dispatchfüggvényt meghív egy action(eseményt leíró objektum). ?

A reduktorokat jelenleg egy osztálykomponensben használhatjuk egy olyan funkció létrehozásával, amely az állapot beállítását egy ilyen művelettípus szerint kezeli:

A reduktor használata ebben az egyszerű példában véleményem szerint túlzás. Örülök reagál meg fog is nyújtó useStateés useReducerhorog emiatt.

Ha észrevenném, hogy átadom az állapotváltás módjait, és countpár további állapottulajdonsággal párosulok, átkapcsolnék egy reduktorra.

Mivel a Redux minden állapotát egy gyorsan növekvő objektumba rakja, tökéletesen illeszkedik a reduktor mintájához. Lehetséges eltávolítani a reduktorokat a Redux-ból, annak ellenére, hogy rengeteg fantasztikus funkciót veszítenénk el.

A Redux lehetővé teszi connecta globális tárolást az összetevőhöz. Lefordíthatja az állapotot kellékekre. Olyan dispatchfunkciót is biztosítanak, amely beindítja a reduktorokat.

dispatchFunkció átadása helyett adjunk át egy olyan updatefunkciót, amelyik hasonlóan működik setState.

? A Redux rosszabb verziójának létrehozása

Amikor a frissítést hívja, pontosan megmondja, hogy az állapotnak hogyan kell változnia a soron belül. Lehet, hogy nem áll más hasonló állapotváltozások mellett.

Elég kicsi állapot mellett ez valóban szép és tömör érzés. Ha 5 vagy több komponensünk megváltoztatná néhány állapot tulajdonságát, nehéz lenne megtalálni a hibák forrását. ? ?

A redux megváltoztatása nélkül is utánozhatja ezt a mintát. A kinézetű akciók elküldése SET_COUNTolyan tippek, amelyeket valóban csak szeretnénk setState. Ezt könnyű elvégezni.

Ha kevésbé megítélt akciót hozunk létre, mint például INCREMENT_BUTTON_CLICKEDsok szűkítőben, akkor az akció hasznos terhelése nem változik túlságosan.

? A reduktorok több mint az állam számára hasznosak

A reduktorok nagyszerű módja a döntések elhelyezésének. Ha korábban dolgozott a reakció-router-4-tel, akkor a fenti kódnak elég ismerősnek kell lennie.

Köszönhetően a /> 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.

Original text