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

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

У Нект.јс апликацијама управљање стањем обично укључује два типа стања: глобално стање и стање компоненте. Глобално стање садржи информације које деле све компоненте у апликацији, као што је статус аутентификације корисника, док стање компоненте чува податке специфичне за појединачне компоненте.

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

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

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

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

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

1. Креирајте нови Нект.јс пројекат локално тако што ћете покренути наредбу испод у свом терминалу:

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

2. Након креирања пројекта, идите у директоријум пројекта тако што ћете покренути:

   цд нект-редук-тоолкит

3. На крају, инсталирајте потребне зависности у свој пројекат користећи нпм, менаџер пакета Ноде.

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

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

Овде можете пронаћи код овог пројекта ГитХуб спремиште.

Конфигуришите Редук Сторе

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

Да бисте направили Редук продавницу, креирајте нову редук фолдер у основном директоријуму вашег Нект.јс пројекта. Унутар ове фасцикле направите нову сторе.јс датотеку и додајте следећи код:

увоз {цонфигуреСторе} из'@редукјс/тоолкит';
увоз профилеРедуцер из'./редуцерс/профилеСлице';
извозУобичајено цонфигуреСторе({
 редуктор:{
 профил: профилеРедуцер
 }
})

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

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

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

Дефинишите делове стања

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

У редук директоријум, креирајте нови фолдер и дајте му име редуктори. Унутар ове фасцикле, креирајте профилеСлице.јс датотеку и додајте следећи код.

увоз {цреатеСлице} из'@редукјс/тоолкит';
конст профилеСлице = цреатеСлице({
 име: 'профил',
 почетно стање: {
 име: 'ниједан'
 },
 редуктори: {
 СЕТ_НАМЕ: (стање, акција) => {
 стате.наме = ацтион.паилоад
 }
}})
извозконст {СЕТ_НАМЕ} = профилеСлице.ацтионс;
извозУобичајено профилеСлице.редуцер;

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

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

Тхе цреатеСлице функција генерише креаторе акција и типове акција аутоматски на основу дефинисаних редуктора. Извезено СЕТ_НАМЕ креатор акције и профилеСлице.редуцер представља генерисани креатор акције и функцију редуктора за пресек профила.

Креирањем овог пресека стања, компоненте унутар апликације могу да користе СЕТ_НАМЕ акцију и проследите жељено оптерећење да бисте ажурирали име профила у стању.

Креирајте компоненту за тестирање функционалности управљања стањем РТК-а

Отвори индек.јс фајл у странице директоријум, избришите шаблон Нект.јс код и додајте следећи код.

увоз стилова из'@/стилес/Хоме.модуле.цсс'
увоз {усеРеф} из'реаговати'
увоз {усеСелецтор, усеДиспатцх} из'реаговати-редук'
увоз {СЕТ_НАМЕ} из'../../редук/редуцерс/профилеСлице'
функцијаПоказати име(){
конст {наме} = усеСелецтор((држава) => стање.профил)
повратак (

 Ја сам {наме} !!</h1> 
 ) }
извозУобичајенофункцијаКућа() {
конст инпутНаме = усеРеф()
конст испорука = усеДиспатцх()
функцијасубмитНаме() {
конзола.лог (инпутНаме.цуррент.валуе)
 отпрема (СЕТ_НАМЕ(инпутНаме.цуррент.валуе))
 }
повратак (
 <>

'Унесите име' реф={инпутНаме} />
Унесите име</button>

 </main>
 </>
 )}

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

Тхе Показати име компонента користи усеСелецтор кука за приступ име својство из стања профила у Редук продавници и приказује га на страници.

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

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

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

Отвори _апп.јс датотеку и ажурирајте је на следећи начин:

увоз {Провидер} из'реаговати-редук'
увоз продавница из'../../редук/сторе'
извозУобичајенофункцијаАпликација({ Компонента, пагеПропс }) {
повратак (


 </Провајдер> )
}

Сада, само напред и покрените развојни сервер да одражава промене које сте направили, и идите до http://localhost: 3000 у вашем претраживачу да бисте тестирали апликацију.

нпм рун дев

Руковање рехидратацијом података при поновном учитавању странице

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

На клијенту, ЈаваСцрипт код је одговоран за реконструкцију стања апликације преузимањем и десеријализацијом серијализованог стања примљеног од сервера.

На тај начин, апликација може неприметно да врати неопходне податке и сачува сесију корисника. Овај приступ избегава непотребно преузимање података и обезбеђује непрекинуто корисничко искуство приликом навигације између страница или поновног учитавања апликације.

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