Водич за почетнике за Редук

Разумевање Редука као почетника може бити прилично збуњујуће. Редук има обиље нових термина и концепата који су често прилично неинтуитивни. Овај водич представља врло поједностављени пример примене Редук-а. Сваки корак и термин дефинисаћу на начин који има смисла за потпуног почетника.

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

Пример који ћемо проћи у овом водичу биће једноставна тодо апликација. Апликација омогућава кориснику да дода или уклони ставке и види их приказане на страници.

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

Сажетак корака

  1. Напишите функцију редуктора
  2. Инстанцирајте продавницу у основној компоненти
  3. Обмотајте компоненте компонентом, пролазећи у продавници као потпорањ
  4. Напишите компоненту
  5. Дефинисати акције
  6. Дефинишите депешу, прикачите је тамо где ће се депеше покретати (тј. Слушаоци догађаја итд.)
  7. Дефинишите функцију мапСтатеТоПропс
  8. Извезите функцију повезивања, просљеђујући мапСтатеТоПропс и нулл као 2 аргумента и просљеђујући име компоненте у други пар заграда

Кораци

1. Напишите функцију редуктора

Функција редуктора је функција која продавници говори како да одговори на акције. Функција враћа ново и ажурирано стање кад год се пошаље радња. Стање је непроменљиво (не може се променити), тако да редуктор увек враћа ново стање. Редуктор обично користи оператор ширења за уметање тренутног стања у нови објекат / низ и додавање у њега. Уобичајена пракса је употреба наредбе свитцх / цасе и провера својства типа прослеђене акције. Затим напишите код који ажурира стање за сваки случај.

Прво напишемо своју функцију редуктора јер ћемо то морати да проследимо када направимо инстанцу наше продавнице. Да бисте разумели шта се дешава, потребно је одређено знање о акцијама и отпреми. О овоме ћемо говорити даље у овом водичу.

За сада знајте да ће наша тодо апликација морати да комуницира са продавницом на 2 начина: да бисте додали нову ставку задатака у стање и уклонили ставку задатака из државе. Стога своју функцију пишемо тако да одговара на 2 случаја типа акције. Користи вредност акције за додавање или уклањање задате ставке из стања.

Редуктору се прослеђују 2 параметра: стање (ово је целокупно стање тренутно у складишту, а ми му дајемо подразумевану вредност ако стање још увек не постоји) и акција. Враћамо стање у подразумеваном случају.

2. Инстанцирајте продавницу у основној компоненти

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

Друга важна ствар коју треба знати о продавници је да садржи неке корисне и важне методе. Главна метода је функција отпреме. Такође садржи методу гетСтате (за преглед стања) и методу претплате (покреће повратни позив сваки пут када се пошаље радња).

Продавница је обично инстанцирана у корену ваше апликације (нпр. Апп.јс). Складишти се као променљива и као параметар предаје редуктор. Трговина се затим предаје као потпора компоненти Провидер.

Инстанцирамо наш објект продавнице прелазећи у редуктор који смо управо креирали.

3. Обмотајте компоненте компонентом, пролазећи у продавници као потпорањ

Добављач је компонента створена да олакша прослеђивање продавнице свим вашим компонентама. Компонента добављача обавија све ваше компоненте (нпр. Приказује ваше компоненте као подређене добављаче). Продавницу предајете као реквизит само добављачу. То значи да вам није потребно да у радњу прослеђујете као реквизит свакој компоненти јер је свака компонента добија од добављача. Међутим, то не значи да компоненте још увек имају приступ држави. И даље морате да користите мапСтатеТоПропс (ово ћемо покрити касније) да би стање било доступно у вашој компоненти.

Компонујемо Тодо компоненту коју ћемо направити са компонентом Провидер. Пролазимо у продавницу коју смо створили у претходном кораку.

4. Напишите компоненту

Затим почињемо да пишемо компоненту Тодо која ће приказивати ставке тодо и комуницирати са Редук продавницом.

Компонента је компонента са статусом која садржи један елемент стања да би се пратило шта је корисник унео у улаз. Имамо функцију која се зове хандлеЦханге. Ова функција ажурира стање сваки пут када корисник нешто унесе у улаз. За сада је ово све што ћемо написати. Морамо да разумемо више о Редук-у пре него што напишемо логику. Логика ће држави додати нове задатке и преузети тренутне из стања да би се приказали на страници.

5. Дефинисати акције

Акција је једноставан објект који садржи својство које се назива „тип“. Овај објекат се преноси у функцију отпреме. Користи се да продавници саопшти који се догађај управо догодио (читањем својства типа акције). Такође говори које ажурирање треба да изврши као одговор на стање (путем функције редуктора). Акција може садржати и друга својства за било које друге податке које желите да проследите у редуктор. Подаци се могу преносити само овде, тако да ће сви потребни подаци бити потребни овде.

За дефинисање наших акција користићемо креаторе акција. Креатори акције су функција која враћа објект акције. Његова сврха је да акцију учини преносљивијом и проверивијом. То не мења понашање како било шта функционише. То је још један начин писања и преношења радње. Такође вам омогућава да проследите параметре ако желите да пошаљете податке са радњом коју ћемо предузети. Дакле, овде морамо да користимо креаторе акција.

Ако се сећате, наш редуктор је одговорио на 2 врсте радњи - „АДД_ТОДО“ и „РЕМОВЕ_ТОДО“. Те акције ћемо дефинисати са нашим креаторима акција. У нашој акцији адд_тодо вратиће „АДД_ТОДО“ као тип и ставку задатака коју желимо да додамо у продавницу као вредност (треба нам да продавница дода ову ставку задатака у стање како би овде била прослеђена). У ремове_тодо враћамо „РЕМОВЕ_ТОДО“ као тип, а индекс ставке тодо у продавници као вредност. Ово ће нам требати да бисмо га уклонили са листе задатака.

Ако се вратите нашој дефиницији функције редуктора, надамо се да то сада има више смисла. Читајући ацтион.типе редуктор зна да ли треба додати стање у стање или га уклонити из њега. Има ставку тодо прослеђену у адд_тодо. Додаје се тренутном стању помоћу оператора ширења. У ремове_тодо користи оператор ширења да креира нови низ који додаје тренутно стање исечено два пута, једном са свим елементима пре оног за уклањање и друго са свим елементима после оног за уклањање, стварајући тако нови објекат стања са Предмет уклоњен.

Међутим, ово још увек није потпуна слика. Још увек нисмо покрили како се редуктор позива и прослеђује у исправној акцији. За то ћемо морати да пређемо на дефинисање наше функције слања.

6. Дефинишите депешу, прикачите је тамо где ће се депеше покретати (тј. Слушаоци догађаја итд.)

Функција слања је метода складишта која се користи за покретање промене стања. Било који догађај или било шта што треба да ажурира стање мора да позове метод отпреме да би то учинио. Ово је једини начин да се покрене промена / ажурирање стања. Позива се отпрема и предаје се објект акције (или креатор акције ако је то коришћено). Једном када се диспечери покрене, продавница тада позива функцију редуктора и прелази у акцију коју је диспечер обезбедио, а која ажурира стање, као што смо видели раније.

У наставку дефинишемо доњу половину наше методе приказа компонената. Креирамо дугмад која ће садржати наше руковаоце догађајима. Унутар њих ћемо дефинисати наше функције отпреме.

Прво дугме је једноставно дугме за додавање. Ово дугме ће послати радњу адд_тодо у продавницу. Проћи ће у тренутном корисничком уносу као вредност (ово је ставка задатака коју редуктор додаје у ново стање). Имајте на уму да отпрему називамо ас this.props.dispatch. Мало је ван домета овог водича да бисмо разумели како и зашто се ово преноси као ослонац за компоненту. Дакле, само знајте да јесте и можемо то назвати овако.

Други руковатељ догађајима написан је као онЦлицк на нашу приказану тодо ставку. Кликом на било коју ставку на страници покреће се руковатељ догађајима. Водитељ догађаја претражује листу задатака и проналази индекс тог задатка на листи. Затим отпрема акцију ремове_тодо и предаје индекс.

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

Сад недостаје само део слагалице како ћемо добити државу из продавнице Редук. Вероватно сте приметили да сам мапирао листу позвану this.props.todosу претходном примеру. Можда се питате одакле то. Такође се можете сетити на почетку овог водича који сам споменуо да прелазак продавнице у компоненту Провидер није довољан да би се добио приступ стању у продавници. Ово се све решава у следећа 2 корака док дефинишемо нашу функцију мапСтатеТоПропс и преносимо је у функцију повезивања.

7. Дефинишите функцију мапСтатеТоПропс

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

мапСтатеТоПропс је функција која једноставно враћа објекат који дефинише које стање треба пренети у компоненту додељивањем вредности у стању својствима која дефинишете у овом објекту. У основи, објекат који вратите у мапСтатеТоПропс је оно што ће ваши реквизити бити у вашој компоненти. Функција мапСтатеТоПропс се предаје у методу повезивања као први аргумент.

МапСтатеТоПропс узима као параметар целокупно стање и из њега узимате само оно што вам треба. Овде, иако наша држава садржи само списак задатака. Та листа нам је потребна у нашој ТоДо компоненти, вратићемо целокупно стање као својство звано тодос.

Као што сада видите, имамо приступ целој нашој листи задатака у нашим реквизитима као this.props.todos. Тако смо могли да прикажемо све своје задатке у претходном примеру мапирањем преко њега.

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

8. Извезите функцију повезивања, прослеђујући мапСтатеТоПропс и нулл као 2 аргумента и предајући име компоненте у други пар заграда

Повезивање је метода која повезује функције мапСтатеТоПропс и мапДиспатцхТоПропс (погледајте доле) са вашом компонентом, тако да продавница може читати те функције и осигурати да оно што сте тамо дефинисали пређе у компоненту као реквизити. Ова метода има посебну синтаксу која изгледа овако:

connect(mapStateToProps, MapDispatchToProps)(YourComponent)

Преносите 2 map...ToPropsфункције на везу, а затим име ваше компоненте унутар другог пара заграда. Типичан образац је извоз методе повезивања уместо компоненте када извозите компоненту на крају датотеке. На пример:

export default connect(mapStateToProps, MapDispatchToProps)(YourComponent)

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

Можда се питате одакле долази ова функција мапДиспатцхТоПропс и зашто је овде раније нисмо нигде поменули. Па, пошто је овај водич најједноставнији пример Редук продавнице и мапДиспатцхТоПропс није строго обавезан, нисам га укључио у наш пример. Ако не проследите мапДиспатцхТоПропс и уместо тога проследите нулл, и даље можете приступити функцији отпреме у вашој компоненти као што смо то раније чинили this.props.dispatch.

Дакле, да бисмо довршили нашу примерну апликацију, све што треба да урадимо је да извозимо нашу компоненту умотавајући је функцијом повезивања и предајући у мапСтатеТоПропс коју смо управо дефинисали.

И то је то! То је комплетна примена Редук продавнице. У наставку погледајте радни пример онога што смо применили.

Пример потпуног напомена са ознаком

Апп.јс Тодо.јс

Надам се да овај водич може поједноставити неке чудне и понекад збуњујуће детаље Редука. То није комплетан водич за Редук, јер дефинитивно постоји више елемената и образаца које треба разумети. Али ако можете да разумете овај водич, на добром сте путу да можете да радите и инсталирате Редук у своје апликације.