Шта је Реацт Редук и како га користите?

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

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

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

Важност Реацт-Редук-а

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

Реацт-Редук је званична Редук УИ библиотека везивања за Реацт апликације, а одржава је Редук тим.

Повезан: Како да направите своју прву Реацт апликацију са ЈаваСцрипт-ом

Инсталирање Редук-а у директоријуму вашег пројекта

Постоје два начина да добијете приступ Редук библиотеци у вашој Реацт апликацији. Препоручени приступ Редук тима је да користите следећу команду када креирате нови Реацт пројекат:

нпк цреате-реацт-апп ми-апп --темплате редук

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

нпм инсталл редук

Следи Реацт-Редук библиотека УИ повезивања:

нпм инсталл реацт-редук

И Редук комплет алата:

нпм инсталл @редукјс/тоолкит

Библиотека Редук Тоолкит-а је такође важна јер чини процес конфигурације Редук продавнице брзим и лаким.

Креирање Редук продавнице

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

Реацт, као и већина фронт-енд оквира, има улазну тачку у својим апликацијама, а то је датотека или група датотека на највишем нивоу. Тхе индек.хтмл и индек.јс датотеке су две датотеке које се налазе на највишем нивоу Реацт апликације, која је изнад Апп.јс датотеку и све компоненте у апликацији.

Дакле, индек.јс датотека је идеално место за креирање Редук продавнице.

Ажурирање индек.јс са Редук Сторе-ом

импорт Реацт фром 'реацт'
увези РеацтДОМ из 'реацт-дом'
увези апликацију из './Апп'
увези репортВебВиталс из "./репортВебВиталс"
увоз {цонфигуреСторе} из „@редукјс/тоолкит“
импорт { Провидер } из 'реацт-редук'
увези корисника из './редуцерс/усер'
цонст сторе = цонфигуреСторе({
 редуктор:{
 корисник
 }
})
РеацтДОМ.рендер(




,
 доцумент.гетЕлементБиИд('роот')
)
репортВебВиталс();

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

Ваша Реацт апликација не би знала да Редук продавница постоји без компонента провајдера, који долази из Реацт-Редук библиотеке везивања. Компонента добављача узима један реквизит (продавницу) и обавија се око Реацт апликације, чинећи Редук продавницу глобално доступном.

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

Зашто је редуктор важан?

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

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

Креирање Усер Редуцер-а

импорт { цреатеСлице } из "@редукјс/тоолкит";
екпорт цонст усерСлице = цреатеСлице({
 име: "корисник",
 инитиалСтате: { валуе: {емаил: ""}},
 редуктори: {
 логин: (стање, акција) => {
 стате.валуе = ацтион.паилоад
 },
 }
})
екпорт цонст {логин} = усерСлице.ацтионс
извоз подразумевани усерСлице.редуцер;

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

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

Датотека усер.јс извози редуктор за пријаву. Компонента за пријављивање га увози и користи у усеДиспатцх() кука.

Креирање компоненте за пријаву

импорт Реацт фром 'реацт';
импорт Линк фром '@муи/материал/Линк';
импорт ТектФиелд из '@муи/материал/ТектФиелд';
импорт Типограпхи фром '@муи/материал/Типограпхи';
импорт { Буттон, Бок } фром '@муи/материал';
импорт { усеДиспатцх } из 'реацт-редук';
импорт { логин } из '../редуцерс/усер';
импорт { усеСтате } из 'реацт';
фунцтион Сигнин() {
 цонст диспатцх = усеДиспатцх()
 цонст [емаил, сетЕмаил] = усеСтате('')
 цонст хандлеСубмит = () => {
 отпрема (пријава ({емаил: емаил}))
 }
повратак (


ск={{
мој: 8,
приказ: 'флек',
флекДирецтион: 'колона',
алигнИтемс: 'центар',
}}>
 Пријавите се 
лабел="Е-маил адреса"
потребан
ид="е-пошта"
наме="е-маил"
маргин="нормал"
онЦханге={(е) => сетЕмаил (е.таргет.валуе)}
/>
лабел="Лозинка"
потребан
ид="лозинка"
наме="лозинка"
типе="пассворд"
маргин="нормал"
/>
хреф="#"
ск={{мр: 12, мб: 2}}
>
заборави шифру?

варијанта="садржана"
ск={{мт: 2}}
онЦлицк={хандлеСубмит}
>
Пријавите се





);
}
екпорт дефаулт Сигнин;

Компонента за пријављивање изнад користи библиотека МУИ. Креира једноставан образац за пријаву који захтева е-пошту и лозинку корисника. Кликом на дугме за пријаву покренуће се онЦлицк функција, који ће позвати хандлеСубмит функција.

Тхе хандлеСубмит функција користи усеСтате() и усеДиспацт() куке заједно са редуктор за пријаву да би имејл адреса активног корисника била доступна у Редук продавници. Из Редук продавнице, свака компонента у апликацији Реацт сада има приступ е-пошти активног корисника.

Повезан: Хоокс: Тхе Херо оф Реацт Следећа компонента активног корисника преузима е-маил адресу активног корисника уз помоћ усеСелецтор() кука и приказује га у корисничком сучељу апликације.

Датотека АцтивеУсер.јс

импорт Реацт фром "реацт";
импорт { усеСелецтор } из "реацт-редук";
функција АцтивеУсерс() {
 цонст усер = усеСелецтор((стате) => стате.усер.валуе)
 повратак (


Активни корисници

 {усер.емаил} 




 );
}

Ажурирана датотека Апп.јс

Погледајте овај део кода:

импорт Реацт фром "реацт"; импорт АцтивеУсерс из "./цомпонентс/АцтивеУсерс"; импорт Сигнин из "./цомпонентс/Сигнин";
фунцтион Апп() {
повратак ( 
);
}
извоз подразумеване апликације; 

Тхе Апп.јс датотека изнад приказује и активне кориснике и компоненте за пријаву у вашој Реацт апликацији стварајући следећи излаз у вашем претраживачу:

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

Ажурирани кориснички интерфејс

Када треба да користите Редук?

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

Користећи горњи пример школе, компонента за пријављивање, компонента активног корисника, учесник у разреду компоненти, па чак и компоненти профила ће бити потребна адреса е-поште корисника (или нека друга јединствена идентификатор). Због тога је Редук најбоља опција овде.

Међутим, ако имате стање које користи само једна или две компоненте, онда би боља опција могла бити Реацт пропс.

Како користити реквизите у РеацтЈС-у

Ако тражите савете о томе како да користите пропс у РеацтЈС-у, на правом сте месту.

Реад Нект

О аутору