Како разумети редукторе: Можете их користити без Редука

ТЛДР: Стањем можете управљати са редуктором у компонентама класе тако што ћете имати једну функцију која акције претвара у промене стања. Централизира све ваше сетСтатес.

? Шта је редуктор?

Редуктори су функције које узимају улаз и одлучују шта ће с њим учинити на једном централном месту. То је то. ?

Ако имате функцију која одређује приказ који ће се приказивати на основу УРЛ-а, то је редуктор.

Редук Редуцерс ™ су посебна употреба редуктора који тумаче догађаје у вашој апликацији и како то мења стање апликације.

Ако нисте упознати са Редук-ом, горњи пример се обично покреће позивањем dispatchфункције са action(објект који описује догађај). ?

Сада можемо користити редукторе у компоненти класе тако што ћемо створити функцију која управља подешавањем стања према типу радње на следећи начин:

Коришћење редуктора у овом једноставном примеру је претјерано по мом мишљењу. Драго ми је што ће Реацт из тог разлога пружити и а useStateи useReducerхоок.

Ако бих приметио да преносим начине за промену стања и countпостао повезан са још неколико својстава државе, пребацио бих се на редуктор.

Будући да Редук све своје стање ставља у један објекат који брзо расте, чини образац редуктора савршеним уклапањем. Из Редука је могуће уклонити редукторе, иако бисмо изгубили гомилу сјајних карактеристика.

Редук вам омогућава connectглобално складиштење ваше компоненте. Можете превести државу у реквизите. Они такође пружају dispatchфункцију која покреће ваше редукторе.

Уместо да проследимо dispatchфункцију, уђимо у updateфункцију која функционише као setState.

? Стварање још горе верзије Редука

Када позовете ажурирање, говорите тачно како би се стање требало променити у реду. Може бити или не мора бити поред других сличних промена стања.

Са довољно малом државом, ово се заправо чини лепо и концизно. Да имамо 5 или више компонената које мењају неколико својстава стања, било би тешко пронаћи извор грешака. ? ?

Чак и без уопште промене редукса, можете опонашати овај образац. Диспечерске акције које изгледају SET_COUNTсу наговештаји које заиста само желимо setState. То је лако учинити.

Ако створимо мање самопоуздану акцију као што INCREMENT_BUTTON_CLICKEDбисмо је могли користити у многим редукторима, а корисни терет акције не би превише варирао.

? Редуктори су корисни за више од државе

Редуктори су одличан начин да се донесу одлуке. Ако сте и раније радили са респонсе-роутер-4, онда би горњи код требао изгледати прилично познато.

Захваљујући /> 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.