Когато управлявате сложни състояния в приложение Next, нещата могат бързо да станат трудни. Традиционни куки като useState подпомагат държавното управление, но представляват проблем с пробивното сондиране. Подпорно пробиване означава предаване на данни или функции през няколко компонента.

По-добър подход би бил отделянето на вашата логика за управление на състоянието от компонентите и актуализирането на тези състояния от всяко място във вашето приложение. Ще ви преведем как да използвате Context API, докато създаваме просто приложение за списък със задачи.

Преди да започнете своя списък със задачи

Преди да можете да създадете приложението за списък със задачи, ще ви трябва:

  • Основни познания за модерни JavaScript оператори и React's useState hook.
  • Разбиране за това как да деструктуриране на масиви и обекти в JavaScript.
  • Възел v16.8 или по-нова версия, инсталирана на вашата локална машина и познаване на мениджъри на пакети като npm или прежда.

Можете да намерите готовия проект на GitHub за справка и по-нататъшно проучване.

instagram viewer

Разбиране на състоянието и управлението на приложението

Състоянието на приложението се отнася до текущото състояние на приложението в даден момент от време. Това включва информация, която приложението знае и управлява, като потребителско въвеждане и данни, извлечени от база данни или API (интерфейс за програмиране на приложения).

За да разберете състоянието на приложението, помислете за възможните състояния на обикновено приложение за брояч. Те включват:

  • Състоянието по подразбиране когато броячът е на нула.
  • Повишено състояние когато броячът се увеличи с единица.
  • Намалено състояние когато броячът намалява с единица.
  • Състояние на нулиране когато броячът се върне към състоянието си по подразбиране.

Компонент на React може да се абонира за промени в състоянието. Когато потребител взаимодейства с такъв компонент, неговите действия – като щраквания върху бутони – могат да управляват актуализации на състоянието.

Този фрагмент показва просто приложение за брояч, в състоянието си по подразбиране, което управлява състояние въз основа на действия с щракване:

конст [брояч, setCounter] = useState(0);
връщане (

{counter}</h1>

Настройка и инсталиране

Хранилището на проекта съдържа два клона: стартер и контекст. Можете да използвате началния клон като база, от която да изградите проекта, или контекстния клон, за да визуализирате финалната демонстрация.

Клониране на приложението Starter

Стартовото приложение предоставя потребителския интерфейс, от който се нуждаете за окончателното приложение, така че можете да се съсредоточите върху внедряването на основната логика. Отворете терминал и изпълнете следната команда, за да клонирате стартовия клон на хранилището към вашата локална машина:

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

Изпълнете следната команда в директорията на проекта, за да инсталирате зависимостите и да стартирате вашия сървър за разработка:

yarn && yarn dev

Или:

npm i && npm стартиране dev

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

Прилагане на логиката

Context API предоставя начин за управление и споделяне на данни за състоянието между компонентите, без необходимост от ръчно пробиване на подпори.

Стъпка 1: Създайте и експортирайте контекст

Създавам src/приложение/контекст папка за съхраняване на контекстния файл и поддържане на директорията на проекта добре организирана. В тази папка създайте a todo.context.jsx файл, който ще съдържа цялата контекстна логика за приложението.

Импортирайте createContext функция от реагират библиотека и я извикайте, като съхраните резултата в променлива:

импортиране { createContext} от"реагира";
конст TodoContext = createContext();

След това създайте персонализирано useTodoContext кука, която се връща TodoContext в използваемата му форма.

износконст useTodoContext = () => useContext (TodoContext);

Стъпка 2: Създайте и управлявайте състояния

За да извършите CRUD (създаване, четене, актуализиране, изтриване) действия на приложението, ще трябва да създадете състоянията и да ги управлявате с Доставчик компонент.

конст TodoContextProvider = ({ деца }) => {
конст [задача, setTask] = useState("");
конст [задачи, setTasks] = useState([]);
връщане<TodoContext. Доставчикстойност={{}}>{деца}TodoContext. Доставчик>;
};
износпо подразбиране TodoContextProvider;

Точно преди връщане изявление, създайте a handleTodoInput функция, която ще се изпълнява, когато потребителят въведе задача. След това тази функция актуализира задача състояние.

конст handleTodoInput = (вход) => setTask (вход);

Добави createTask функция, която ще се изпълнява, когато потребител изпрати задача. Тази функция актуализира задачи състояние и присвоява на новата задача произволен идентификатор.

конст createTask = (д) => {
 e.preventDefault();
 setTasks([
 {
 документ за самоличност: математика.trunc(математика.random() * 1000 + 1),
 задача,
 },
 ...задачи,
 ]);
 };

Създайте updateTask функция, която картографира през задачи списък и актуализира задачата, чийто идентификатор съвпада с идентификатора на кликната задача.

конст updateTask = (id, updateText) =>
 setTasks (tasks.map((T) => (t.id id? { ...T, задача: updateText }: t)));

Създавам deleteTask функция, която актуализира задачи списък, така че да включва всички задачи, чийто идентификатор не съответства на дадения параметър.

конст deleteTask = (документ за самоличност) => setTasks (tasks.filter((T) => t.id !== id));

Стъпка 3: Добавете състояния и манипулатори към доставчика

След като сте създали състоянията и сте написали код за управлението им, трябва да направите тези състояния и манипулаторни функции достъпни за Доставчик. Можете да ги предоставите под формата на обект, като използвате стойност собственост на Доставчик компонент.

връщане (
 стойност={{
 задача,
 задачи,
 handleTodoInput,
 createTask,
 updateTask,
 изтриване на задача,
 }}
 >
 {деца}
 </TodoContext.Provider>
);

Стъпка 4: Обхват на контекста

The Доставчик който сте създали, трябва да обвие компонента от най-високо ниво, за да направи контекста достъпен за цялото приложение. За да направите това, редактирайте src/app/page.jsx и увийте Todos компонент с TodoContextProvider компонент:


;
</TodoContextProvider>;

Стъпка 5: Използвайте контекста в компонентите

Редактирайте своя src/app/components/Todos.jsx файл и унищожаване задачи, задача, handleTodoInput, и createTask чрез обаждане до useTodoContext функция.

конст { задача, задачи, handleTodoInput, createTask } = useTodoContext();

Сега актуализирайте елемента на формуляра, за да обработва събитието за изпращане и промените в главното поле за въвеждане:

 createTask (e)}>
"въвеждане на задачи" тип="текст" заместител =„Въведете задача“ необходима стойност={задача} onChange={(e) => handleTodoInput (e.target.value)} />
"подаване на задачи" тип="Изпращане" стойност=„Добавяне на задача“ />
</form>

Стъпка 6: Рендирайте задачи в потребителския интерфейс

Вече можете да използвате приложението, за да създадете и добавите задача към задачи списък. За да актуализирате дисплея, ще трябва да картографирате съществуващите задачи и ги изобразете в потребителския интерфейс. Първо създайте a src/app/components/Todo.jsx компонент за съхранение на един елемент от задачата.

В рамките на src/app/components/Todo.jsx компонент, редактирайте или изтрийте задача, като извикате updateTask и deleteTask функции, в които създадохме src/app/context/todo.context.jsx файл.

импортиране Реагирайте, {useState} от"реагира";
импортиране {useTodoContext} от"../context/todo.context";
конст Todo = ({ задача }) => {
конст { updateTask, deleteTask } = useTodoContext();


// isEdit проследява състоянието, когато задача е в режим на редактиране
конст [isEdit, setIsEdit] = useState(невярно);


връщане (

"обвивка на задачи">


 {isEdit? ( <входТип="текст"стойност={задача.задача}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ) :
 (<thclassName="задача">{задача.задача}th> )}



"действия">






износпо подразбиране Да направя;

За да изобразите src/app/components/Todo.jsx компонент за всеки задача, отидете в src/app/components/Todos.jsx файл и условно карта през задачи веднага след заглавка затварящ етикет.

{задачи && (

 {tasks.map((задача, i) => ( <Да направяключ={i}задача={задача} /> ))}
</main>
)}

Тествайте приложението си в браузър и се уверете, че дава очаквания резултат.

Записване на задачи в локално хранилище

В момента опресняването на страницата ще нулира задачите, отхвърляйки всички, които сте създали. Един от начините за отстраняване на този проблем е чрез съхраняване на задачите в локалното хранилище на браузъра.

API за уеб съхранение е подобрение на съхранението на бисквитки с функции, които подобряват изживяването както за потребителите, така и за разработчиците.