Wbudowany kontekstowy interfejs API Reacta jest idealny do udostępniania stanu. Dowiedz się jak z niego korzystać w najnowszej wersji Next.js.

Next.js oferuje kilka podejść do zarządzania stanem. Chociaż niektóre z tych metod wymagają instalacji nowych bibliotek, interfejs API kontekstu React jest wbudowany, więc jest to świetny sposób na zmniejszenie zewnętrznych zależności.

Dzięki React Context możesz płynnie przekazywać dane przez różne części drzewa komponentów, eliminując kłopoty z wierceniem podpór. Jest to szczególnie przydatne do zarządzania stanem globalnym, takim jak status zalogowania bieżącego użytkownika lub jego preferowany motyw.

Zrozumienie interfejsu API kontekstu reakcji

Zanim zagłębimy się w kod, ważne jest, aby to zrobić zrozumieć, czym jest React Context API i jakiego problemu dotyczy.

Rekwizyty zapewniają efektywną metodę udostępniania danych pomiędzy komponentami. Umożliwiają przekazywanie danych z komponentu nadrzędnego do komponentów podrzędnych.

To podejście jest przydatne, ponieważ wyraźnie pokazuje, które komponenty korzystają z określonych danych i w jaki sposób dane te przepływają w dół drzewa komponentów.

instagram viewer

Jednak problemy pojawiają się, gdy masz głęboko zagnieżdżone komponenty, które muszą zużywać te same rekwizyty. Taka sytuacja może wprowadzić złożoność i potencjalnie skutkować powstaniem skomplikowanego kodu, który będzie trudniejszy w utrzymaniu. Kwestie te to między innymi wady wiercenia podporowego.

React Context rozwiązuje to wyzwanie, zapewniając scentralizowaną metodę tworzenia i wykorzystywania danych, które muszą być dostępne globalnie, pomiędzy komponentami.

Konfiguruje kontekst do przechowywania tych danych, umożliwiając komponentom dostęp do nich. Takie podejście pomaga uporządkować bazę kodu, aby zapewnić jej dobrą organizację.

Kod tego projektu znajdziesz w jego pliku GitHub magazyn.

Pierwsze kroki z zarządzaniem stanem w Next.js 13 Korzystanie z API React Context

Komponenty serwera Next.js umożliwiają tworzenie aplikacji, które wykorzystują to, co najlepsze z obu światów: interaktywność aplikacji po stronie klienta i korzyści w zakresie wydajności wynikające z renderowania serwera.

Next.js 13 implementuje komponenty serwera w pliku aplikacja katalog — który jest teraz stabilny — domyślnie. Jednakże, ponieważ wszystkie komponenty są renderowane przez serwer, możesz napotkać problemy podczas integracji bibliotek po stronie klienta lub interfejsów API, takich jak React Context.

Aby tego uniknąć, świetnym rozwiązaniem jest użyj klienta flagę, którą możesz ustawić dla plików, które będą uruchamiać kod po stronie klienta.

Aby rozpocząć, utwórz lokalnie projekt Next.js 13, uruchamiając to polecenie w terminalu:

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

Po utworzeniu projektu przejdź do jego katalogu:

cd next-context-api

Następnie uruchom serwer programistyczny:

npm run dev

Po skonfigurowaniu podstawowego projektu Next.js możesz zbudować podstawową aplikację typu „to-do”, która wykorzystuje React Context API do zarządzania stanem.

Utwórz dostawcę kontekstu

Plik dostawcy kontekstu służy jako centralny koncentrator, w którym można zdefiniować stan globalny, do którego komponenty muszą uzyskać dostęp, i zarządzać nim.

Utwórz nowy plik, src/context/Todo.context.jsi wypełnij go następującym kodem.

"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>
 );
};

Ta konfiguracja kontekstu reakcji definiuje a Kontekst rzeczy do zrobienia który początkowo przechowuje stan pustej listy zadań do wykonania dla aplikacji.

Oprócz utworzenia stanu początkowego, ta konfiguracja kontekstu obejmuje: reduktor funkcja definiująca różne typy akcji. Te typy akcji będą modyfikować stan kontekstu w zależności od wywołanych akcji. W tym przypadku akcje obejmują dodawanie, usuwanie i edycję zadań do wykonania.

The Dostawca kontekstu zadań Todo komponent zapewnia Kontekst rzeczy do zrobienia do innych komponentów aplikacji. Komponent ten przyjmuje dwie rekwizyty: wartość, która jest początkowym stanem kontekstu, oraz rekwizyt redukujący, który jest funkcją redukującą.

Gdy komponent korzysta z TodoContext, może uzyskać dostęp do stanu kontekstu i wywołać akcje w celu aktualizacji stanu.

Dodaj dostawcę kontekstu do aplikacji Next.js

Teraz, aby mieć pewność, że dostawca kontekstu będzie renderowany w katalogu głównym aplikacji Next.js i że wszystkie komponenty klienta będą miały do ​​niego dostęp, musisz dodać kontekst do głównego komponentu układu aplikacji.

Aby to zrobić, otwórz plik src/app/layout.js plik i zawiń węzeł podrzędny w szablonie HTML za pomocą dostawcy kontekstu w następujący sposób:

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>
 );
}

Utwórz komponent zadań do wykonania

Utwórz nowy plik, źródło/komponenty/Todo.jsi dodaj do niego następujący kod.

Zacznij od wykonania następujących importów. Pamiętaj, aby uwzględnić użyj klienta flagę, aby oznaczyć ten komponent jako komponent po stronie klienta.

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

Następnie zdefiniuj komponent funkcjonalny, w tym elementy JSX, które będą renderowane w przeglądarce.

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>
 );
}

Ten komponent funkcjonalny zawiera pola wejściowe umożliwiające dodawanie, edytowanie i usuwanie zadań wraz z odpowiednimi przyciskami. To używa Renderowanie warunkowe w React aby wyświetlić przyciski edycji i usuwania w oparciu o wartość indeksu edycji.

Na koniec zdefiniuj wymagane zmienne stanu i wymagane funkcje obsługi dla każdego typu akcji. Wewnątrz komponentu funkcji dodaj następujący kod.

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("");
 };

Te funkcje obsługi odpowiadają za obsługę dodawania, usuwania i edytowania zadań użytkownika w stanie kontekstu.

Zapewniają, że gdy użytkownik doda, usunie lub edytuje zadanie, odpowiednie akcje zostaną wysłane do reduktora kontekstu w celu odpowiedniej aktualizacji stanu.

Renderuj komponent czynności do wykonania

Na koniec zaimportuj komponent To-do do komponentu strony.

W tym celu otwórz plik page.js w katalogu src/app, usuń kod Next.js i dodaj poniższy kod:

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


 </main>
 )
}

Świetnie! W tym momencie powinno być możliwe zarządzanie stanem w aplikacji To-do Next.js przy użyciu kontekstu reakcji.

Używanie interfejsu API kontekstowego reakcji z innymi technologiami zarządzania stanem

React Context API to świetne rozwiązanie do zarządzania stanem. Niemniej jednak można go używać razem z innymi bibliotekami zarządzania stanem, takimi jak Redux. To hybrydowe podejście gwarantuje, że użyjesz najlepszego narzędzia dla różnych części aplikacji, które pełnią kluczowe role.

W ten sposób można wykorzystać zalety różnych rozwiązań do zarządzania stanem, aby tworzyć wydajne i łatwe w utrzymaniu aplikacje.