Реацт-ов уграђени Цонтект АПИ је савршен за дељење стања. Сазнајте како да га користите са најновијом верзијом Нект.јс.

Нект.јс нуди неколико приступа управљању стањем. Иако неке од ових метода захтевају инсталирање нових библиотека, Реацтов Цонтект АПИ је уграђен, тако да је одличан начин за смањење спољних зависности.

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

Разумевање Реацт Цонтект АПИ-ја

Пре него што уђете у код, важно је да разуме шта је Реацт Цонтект АПИ и којим проблемом се бави.

Реквизити пружају ефикасан метод за дељење података између компоненти. Они вам омогућавају да пренесете податке са родитељске компоненте на њене подређене компоненте.

Овај приступ је користан јер јасно показује које компоненте користе одређене податке и како ти подаци теку низ стабло компоненти.

instagram viewer

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

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

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

Код овог пројекта можете пронаћи у њему ГитХуб репозиторијум.

Први кораци са управљањем стањем у Нект.јс 13 Коришћење Реацт Цонтект АПИ-ја

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

Нект.јс 13 имплементира компоненте сервера у апликација директоријум—који је сада стабилан—подразумевано. Међутим, пошто су све компоненте приказане на серверу, можете наићи на проблеме при интеграцији библиотека на страни клијента или АПИ-ја као што је Реацт Цонтект.

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

Да бисте започели, креирајте пројекат Нект.јс 13 локално покретањем ове команде у свом терминалу:

npx create-next-app@latest next-context-api

Након креирања пројекта, идите до његовог директоријума:

cd next-context-api

Затим покрените развојни сервер:

npm run dev

Када подесите основни Нект.јс пројекат, можете да направите основну апликацију за обавезе која користи Реацт Цонтект АПИ за управљање стањем.

Креирајте Цонтект Провидер

Датотека добављача контекста служи као централно чвориште где дефинишете и управљате глобалним стањем коме компоненте треба да приступе.

Креирајте нову датотеку, срц/цонтект/Тодо.цонтект.јс, и попуните га следећим кодом.

"use client"
import React, { createContext, useReducer } from"react";


const initialState = {
 todos: [],
};


const reducer = (state, action) => {
switch (action.type) {
case"ADD_TODO":
return { ...state, todos: [...state.todos, action.payload] };


case"DELETE_TODO":
return { ...state, todos: state.todos.filter((todo, index) =>
 index !== action.payload) };


case"EDIT_TODO":
const updatedTodos = state.todos.map((todo, index) =>
 index action.payload.index? action.payload.newTodo: todo);
return { ...state, todos: updatedTodos };


default:
return state;
 }
};


exportconst TodoContext = createContext({
 state: initialState,
 dispatch: () =>null,
});


exportconst TodoContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (

 {children}
 </TodoContext.Provider>
 );
};

Ово подешавање Реацт контекста дефинише а ТодоЦонтект који у почетку држи стање празне листе обавеза за апликацију.

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

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

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

Додајте добављач контекста у апликацију Нект.јс

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

Да бисте то урадили, отворите срц/апп/лаиоут.јс датотеку и умотајте дечји чвор у ХТМЛ шаблон са добављачем контекста на следећи начин:

import'./globals.css';
import { TodoContextProvider } from"@/context/Todo.context";
exportconst metadata = {
 title: "Create Next App",
 description: "Generated by create next app",
};
exportdefaultfunctionRootLayout({
 children
}) {
return (
"en">

{children}</TodoContextProvider>
 </body>
 </html>
 );
}

Направите компоненту задатака

Креирајте нову датотеку, срц/цомпонентс/Тодо.јс, и додајте му следећи код.

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

"use client"
import { TodoContext } from"@/context/Todo.context";
import React, { useContext, useState } from"react";

Затим дефинишите функционалну компоненту, укључујући ЈСКС елементе који ће се приказати у претраживачу.

exportdefaultfunctionTodo() {
return (
marginBottom: "4rem", textAlign: "center" }}>
Todos</h2>



 type="text"
 value={todoText}
 onChange={(e) => setTodoText(e.target.value)}
 style={{ marginBottom: 16}}
 placeholder="Enter a todo"
 />






    

     {state.todos.map((todo, index) => (
  • 

     {index editingIndex? (
     <>
     type="text"
     value={editedTodo}
     onChange={(e) => setEditedTodo(e.target.value)}
     />
    • 



 style={{ marginRight: 16}} 
 onClick={() => handleEditTodo(index, editedTodo)}
 >
 Save
 </button>
 </>
 ): (
 <>
 {todo}
 style={{ marginRight: 16}} 
 onClick={() => setEditingIndex(index)}
 >Edit</button>


 onClick={() => handleDeleteTodo(index)}
 >Delete</button>
 </>
 )}
 </li>
 ))}
 </ul>
 </div>
 );
}

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

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

const { state, dispatch } = useContext(TodoContext);
const [todoText, setTodoText] = useState("");
const [editingIndex, setEditingIndex] = useState(-1);
const [editedTodo, setEditedTodo] = useState("");
const handleAddTodo = () => {
if (todoText.trim() !== "") {
 dispatch({ type: "ADD_TODO", payload: todoText });
 setTodoText("");
 }
 };


const handleDeleteTodo = (index) => {
 dispatch({ type: "DELETE_TODO", payload: index });
 };
const handleEditTodo = (index, newTodo) => {
 dispatch({ type: "EDIT_TODO", payload: { index, newTodo } });
 setEditingIndex(-1);
 setEditedTodo("");
 };

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

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

Рендер тхе То-До Цомпонент

На крају, увезите компоненту Обавезе у компоненту странице.

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

import styles from'./page.module.css'
import Todo from'../components/Todo'
exportdefaultfunctionHome() {
return (


 </main>
 )
}

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

Коришћење Реацт Цонтект АПИ-ја са другим технологијама управљања стањем

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

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