Истраживање управљања стањем у Реацту користећи Јотаи: Практични водич

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

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

Шта је Јотаи и како функционише?

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

У идеалном случају, различите компоненте у апликацији, приступају и ажурирају ове атоме помоћу куке коју је обезбедио Јотаи под називом усеАтом. Ево једноставног примера како да направите Јотаи атом:

увоз { атом} из'јотаи';
конст цоунтАтом = атом(1);

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

Ево примера који показује његову употребу:

увоз { усеАтом } из'јотаи';
конст цоунтАтом = атом(1);
функцијаМиЦомпонент() {
конст [цоунт, сетЦоунт] = усеАтом (цоунтАтом);
конст прираст = () => сетЦоунт((превЦоунт) => превЦоунт + 1);
повратак (


Број: {цоунт}</p>
Инцремент</button>
 </div>
 );
}

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

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

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

Управљање државом у Реацту користећи Јотаи

Започети, креирајте Реацт апликацију. Алтернативно, можете користите Вите за постављање Реацт пројекта. Када поставите основну Реацт апликацију, наставите и инсталирајте Јотаи у своју апликацију.

нпм инсталл јотаи

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

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

увоз { Провајдер } из"јотаи";

Сада умотајте апликацију у индек.јс или маин.јск како је приказано испод.

увоз Реаговати из'реаговати'
увоз РеацтДОМ из'реацт-дом/цлиент'
увоз Апликација из'./Апп.јск'
увоз'./индек.цсс'
увоз { Провајдер } из"јотаи";
РеацтДОМ.цреатеРоот(документ.гетЕлементБиИд('корен')).дати, пружити(



 </Provider>
 </React.StrictMode>,
)

Конфигуришите складиште података

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

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

увоз { атом} из"јотаи";
извозконст ТодосАтом = атом([]);

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

Имплементирајте функционалност апликације То-До

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

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

1. Увезите складиште података и усеАтом кука.

   увоз Реагујте, { усеСтате } из'реаговати';
   увоз { ТодосАтом } из'../ТодоСторе';
   увоз { усеАтом } из'јотаи';

2. Креирајте функционалну компоненту и додајте ЈСКС елементе.

   конст Тодо = () => {
   
   повратак (
   
   
    плацехолдер="Нови задатак"
    вредност={вредност}
    онЦханге={евент => сетВалуе (евент.таргет.валуе)}
    />
   Додај Тодо</button>
   
   
    {тодос.мап(урадити => (
   
   
    {тодо.тект}
    хандлеДелете (тодо.ид)}>Делете</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };