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

Бољи приступ би био одвајање ваше логике управљања стањем од компоненти и ажурирање ових стања са било ког места у вашој апликацији. Провешћемо вас кроз како да користите Цонтект АПИ док правимо једноставну апликацију за листу обавеза.

Пре него што започнете своју листу обавеза

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

  • Основно знање о савремени ЈаваСцрипт оператори и Реацт-ова кука усеСтате.
  • Разумевање како да деструктурирати низове и објекте у ЈаваСцрипт-у.
  • Чвор в16.8 или новија инсталирана на вашој локалној машини и упозната са менаџери пакета као што је нпм или предиво.

Готов пројекат можете пронаћи на ГитХуб за референцу и даља истраживања.

Разумевање стања апликације и управљања

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

instagram viewer

Да бисте разумели стање апликације, размотрите могућа стања једноставне контра апликације. То укључује:

  • Подразумевано стање када је бројач на нули.
  • Повећано стање када се бројач повећа за један.
  • Смањено стање када се бројач смањи за један.
  • Стање ресетовања када се бројач врати у подразумевано стање.

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

Овај исечак приказује једноставну апликацију за бројање, у свом подразумеваном стању, која управља стањем на основу радњи клика:

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

{цоунтер}</h1>

Подешавање и инсталација

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

Клонирање апликације Стартер

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

гит клон -б стартер https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

Покрените следећу команду у директоријуму пројекта да бисте инсталирали зависности и покренули свој развојни сервер:

предива && предива дев

Или:

нпм и && нпм рун дев

Ако је све прошло добро, кориснички интерфејс би требало да се прикаже у вашем претраживачу:

Имплементација логике

Контекст АПИ пружа начин за управљање и дељење података о стању између компоненти, без потребе за ручним бушењем подупирача.

Корак 1: Креирајте и извезите контекст

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

Увезите цреатеЦонтект функција из реаговати библиотеку и позовите је, чувајући резултат у променљивој:

увоз { цреатеЦонтект} из"реаговати";
конст ТодоЦонтект = цреатеЦонтект();

Затим креирајте прилагођено усеТодоЦонтект кука која се враћа ТодоЦонтект у свом употребном облику.

извозконст усеТодоЦонтект = () => усеЦонтект (ТодоЦонтект);

Корак 2: Креирајте и управљајте државама

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

конст ТодоЦонтектПровидер = ({ деца }) => {
конст [задатак, сетТаск] = усеСтате("");
конст [задаци, сетТаскс] = усеСтате([]);
повратак<ТодоЦонтект. Провајдервредност={{}}>{деца}ТодоЦонтект. Провајдер>;
};
извозУобичајено ТодоЦонтектПровидер;

Непосредно пре повратак изјаву, створити а хандлеТодоИнпут функција која ће се покренути када корисник унесе задатак. Ова функција затим ажурира задатак држава.

конст хандлеТодоИнпут = (улазни) => сетТаск (улаз);

Додајте а цреатеТаск функција која ће се покренути када корисник пошаље задатак. Ова функција ажурира задатака стање и новом задатку додељује насумични ИД.

конст цреатеТаск = (е) => {
 е.превентДефаулт();
 сетТаскс([
 {
 ид: Матх.трунц(Матх.рандом() * 1000 + 1),
 задатак,
 },
 ...задаци,
 ]);
 };

Направите ан упдатеТаск функција која пресликава кроз задатака листа и ажурира задатак чији се ИД поклапа са ИД-ом задатка на који се кликне.

конст упдатеТаск = (ид, упдатеТект) =>
 сетТаскс (таскс.мап((т) => (т.ид ид? { ...т, задатак: упдатеТект }: т)));

Створити делетеТаск функција која ажурира задатака листу тако да укључује све задатке чији се ИД не подудара са датим параметром.

конст делетеТаск = (ид) => сетТаскс (таскс.филтер((т) => т.ид !== ид));

Корак 3: Додајте државе и руковаоце добављачу

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

повратак (
 вредност={{
 задатак,
 задаци,
 хандлеТодоИнпут,
 цреатеТаск,
 упдатеТаск,
 делетеТаск,
 }}
 >
 {деца}
 </TodoContext.Provider>
);

Корак 4: Опсег контекста

Тхе Провајдер коју сте креирали морате да омотате компоненту највишег нивоа да би контекст био доступан целој апликацији. Да бисте то урадили, уредите срц/апп/паге.јск и замотајте Тодос компонента са ТодоЦонтектПровидер саставни део:


;
</TodoContextProvider>;

Корак 5: Користите контекст у компонентама

Уредите своје срц/апп/цомпонентс/Тодос.јск фајл и деструктурирање задаци, задатак, хандлеТодоИнпут, и цреатеТаск путем позива на усеТодоЦонтект функција.

конст { задатак, задаци, хандлеТодоИнпут, цреатеТаск } = усеТодоЦонтект();

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

 цреатеТаск (е)}>
"тодо-инпут" типе="текст" плацехолдер=„Унесите задатак“ потребна вредност={таск} онЦханге={(е) => хандлеТодоИнпут (е.таргет.валуе)} />
"пошаљи задатак" типе="прихвати" валуе=„Додај задатак“ />
</form>

Корак 6: Рендеровање задатака у корисничком интерфејсу

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

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

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


// исЕдит стање прати када је задатак у режиму за уређивање
конст [исЕдит, сетИсЕдит] = усеСтате(лажно);


повратак (

"тодо-враппер">


 {исЕдит? ( <улазнитип="текст"вредност={таск.таск}
 онЦханге={(е) => упдатеТаск (таск.ид, е.таргет.валуе)} /> ):
 (<тхНазив класе="задатак">{таск.таск}тх> )}



"акције">






извозУобичајено Урадити;

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

{задаци && (

 {таскс.мап((задатак, тј) => ( <Урадитикључ={и}задатак={задатак} /> ))}
</main>
)}

Тестирајте своју апликацију у претраживачу и потврдите да даје очекивани резултат.

Чување задатака у локалној меморији

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

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