УсеСтате вс. усеРедуцер у Реацт-у: Одабир праве куке за управљање стањем

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

Хоокс су једноставно ЈаваСцрипт функције које изолују и омогућавају вам да поново користите логику у Реацт апликацији. За управљање државом, постоје две главне куке које су вам доступне — усеСтате кука и усеРедуцер кука.

Преглед усеСтате Хоок-а

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

конст [стате, сетСтате] = усеСтате (инитиалСтатеВалуе);

У блоку кода изнад, тхе држава променљива држи податке у меморији између рендеровања. И сетСтате је „сеттер“ функција која манипулише држава променљива.

Тхе усеСтате хоок враћа низ са тачно два елемента. Такође узима почетну вредност за променљиву стања.

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

конст [усерАге, сетУсерАге] = усеСтате(17);

Тхе сетУсерАге функција је одговорна за модификацију усерАге променљива стања.

сетУсерАге(19);

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

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

усерАге = 19;

Стање је локално за компоненту која га дефинише. Ако имате исте компоненте приказане на екрану више пута, свака компонента ће имати своје независно стање.

функцијаАпликација(){
повратак (




 </div>
 )
}

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

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

Преглед употребе Редуцер Хоок-а

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

конст [стање, отпрема] = усеРедуцер (редуцер, инитиалСтате)

У поређењу са усеСтате, ин усеРедуцер, има држава променљива и а депеша функција која шаље акције до редуктор функција која рукује корисним оптерећењем и ажурира држава.

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

функцијаЦоунтер(){
конст [цоунт, сетЦоунт] = усеСтате(0);
повратак(


 Број је: {цоунт}


 сетЦоунт (број + 1)}>Повећај број</button>
 сетЦоунт(0)}>Ресетуј</button>
 сетЦоунт (број - 1)}>Смањи број</button>
 </div>
 </div>
 )
}

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

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

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

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

{тип:"ацтион_типе", носивост:држава * 2}

Прво увезите усеРедуцер кука, а затим дефинишите редуктор функција са параметрима: држава и деструктуирани поступак објекат.

увоз {усеРедуцер} из"реаговати";
функцијаредуктор(стање, { тип, носивост }) {
ако (тип 'цоунтИнцреасе') {
повратак носивост;
 } другоако (тип 'цоунтДецреасе') {
повратак носивост;
 } другоако (тип 'цоунтРесет') {
повратак носивост;
 } друго {
повратак држава;
 }
}

Након дефинисања редуктор функцију, можете изградити Цоунтер компонента са усеРедуцер кука.

функцијаЦоунтер() {
конст [број, отпрема] = усеРедуцер (редуктор, 0);
повратак (


 Број је: {цоунт}


 депеша({ тип: 'цоунтИнцреасе', носивост: број + 1 })}>
 Повећајте број
 </button>
 депеша({ тип: 'цоунтРесет', носивост: 0 })}>
 Ресетуј број
 </button>
 депеша({ тип: 'цоунтДецреасе', носивост: цоунт - 1 })}>
 Повећајте број
 </button>
 </div>
 </div>
 );
}

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

Друго дугме шаље акцију типа цоунтРесет са корисним оптерећењем од 0 који враћа вредност бројања на 0.

Треће дугме шаље акцију типа цоунтДецреасе са носивошћу од број - 1 што смањује вредност бројања за 1.

Бирање између усеСтате и усеРедуцер кукица

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

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

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

Како ваша апликација постаје све сложенија, постаје тешко управљати стањем само са усеСтате и усеРедуцер куке.

Ово је када можете користити екстерне библиотеке као што је Редук, Јотаи и Зустанд. Ове библиотеке олакшавају руковање променама стања у више компоненти.

Олакшавање управљања државом помоћу ЈаваСцрипт библиотека

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

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