L'API Context integrata di React è perfetta per la condivisione dello stato. Scopri come utilizzarlo con l'ultima versione di Next.js.

Next.js offre diversi approcci alla gestione dello stato. Sebbene alcuni di questi metodi richiedano l’installazione di nuove librerie, l’API Context di React è integrata, quindi è un ottimo modo per ridurre le dipendenze esterne.

Con React Context, puoi passare senza problemi i dati attraverso diverse parti dell'albero dei componenti, eliminando il fastidio della perforazione dell'elica. Ciò è particolarmente utile per gestire lo stato globale come lo stato di accesso dell'utente corrente o il suo tema preferito.

Comprensione dell'API React Context

Prima di immergersi nel codice, è importante capire cos'è l'API React Context e quale problema affronta.

I puntelli forniscono un metodo efficace per condividere i dati tra i componenti. Ti consentono di passare i dati da un componente principale ai suoi componenti secondari.

Questo approccio è utile perché mostra chiaramente quali componenti utilizzano determinati dati e come tali dati scorrono lungo l'albero dei componenti.

instagram viewer

Tuttavia, i problemi sorgono quando si hanno componenti profondamente annidati che devono consumare gli stessi oggetti di scena. Questa situazione può introdurre complessità e potenzialmente risultare in un codice contorto che è più difficile da mantenere. Questi problemi, tra gli altri, sono i inconvenienti della perforazione dell'elica.

React Context risolve questa sfida fornendo un metodo centralizzato per creare e utilizzare dati che devono essere accessibili a livello globale, attraverso i componenti.

Imposta un contesto per conservare questi dati, consentendo ai componenti di accedervi. Questo approccio ti aiuta a strutturare la tua codebase per assicurarti che sia ben organizzata.

Puoi trovare il codice di questo progetto nel suo file GitHub deposito.

Iniziare con la gestione dello stato in Next.js 13 Utilizzo dell'API React Context

I componenti server Next.js ti consentono di creare applicazioni che sfruttano il meglio di entrambi i mondi: l'interattività delle app lato client e i vantaggi prestazionali del rendering del server.

Next.js 13 implementa i componenti server in app directory, che ora è stabile, per impostazione predefinita. Tuttavia, poiché tutti i componenti sono sottoposti a rendering server, potresti riscontrare problemi durante l'integrazione di librerie o API lato client come React Context.

Per evitare ciò, un'ottima soluzione alternativa è il utilizzare il cliente flag che è possibile impostare sui file che eseguiranno codice lato client.

Per iniziare, crea un progetto Next.js 13 localmente eseguendo questo comando nel tuo terminale:

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

Dopo aver creato il progetto, vai alla sua directory:

cd next-context-api

Quindi avvia il server di sviluppo:

npm run dev

Dopo aver impostato un progetto Next.js di base, puoi creare un'app di base da fare che utilizza l'API React Context per la gestione dello stato.

Creare il provider di contesto

Il file del provider di contesto funge da hub centrale in cui definisci e gestisci lo stato globale a cui i componenti devono accedere.

Crea un nuovo file, src/context/Todo.context.jse popolarlo con il codice seguente.

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

Questa configurazione del contesto React definisce a TodoContext che inizialmente contiene lo stato di un elenco di cose da fare vuoto per l'app.

Oltre a creare lo stato iniziale, questa configurazione del contesto include a riduttore funzione che definisce vari tipi di azione. Questi tipi di azioni modificheranno lo stato del contesto in base alle azioni attivate. In questo caso, le azioni includono l'aggiunta, l'eliminazione e la modifica delle cose da fare.

IL TodoContextProvider Il componente fornisce il file TodoContext ad altri componenti dell'applicazione. Questo componente prende due prop: il value prop, che è lo stato iniziale del contesto, e il reduce prop, che è la funzione riduttore.

Quando un componente utilizza TodoContext, può accedere allo stato del contesto e inviare azioni per aggiornare lo stato.

Aggiungi il provider di contesto all'app Next.js

Ora, per garantire che il provider di contesto venga visualizzato nella root della tua applicazione Next.js e che tutti i componenti client possano accedervi, devi aggiungere il contesto al componente di layout root dell'app.

Per fare ciò, apri il file src/app/layout.js file e racchiudi il nodo figlio nel modello HTML con il provider di contesto come segue:

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

Crea un componente Da fare

Crea un nuovo file, origine/componenti/Todo.jse aggiungi il seguente codice.

Inizia effettuando le seguenti importazioni. Assicurati di includere il file utilizzare il cliente flag per contrassegnare questo componente come componente lato client.

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

Successivamente, definisci il componente funzionale, inclusi gli elementi JSX che verranno visualizzati nel browser.

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

Questo componente funzionale include campi di input per aggiungere, modificare ed eliminare le cose da fare, insieme ai pulsanti corrispondenti. Utilizza Il rendering condizionale di React per mostrare i pulsanti di modifica ed eliminazione in base al valore dell'indice di modifica.

Infine, definire le variabili di stato richieste e le funzioni di gestione richieste per ciascun tipo di azione. All'interno del componente funzione, aggiungi il seguente codice.

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

Queste funzioni di gestione sono incaricate di gestire l'aggiunta, l'eliminazione e la modifica delle cose da fare di un utente all'interno dello stato del contesto.

Garantiscono che quando un utente aggiunge, elimina o modifica una cosa da fare, le azioni appropriate vengono inviate al riduttore del contesto per aggiornare lo stato di conseguenza.

Eseguire il rendering del componente Da fare

Infine, importa il componente Cose da fare nel componente Pagina.

Per fare ciò, apri il file page.js nella directory src/app, elimina il codice boilerplate Next.js e aggiungi il codice seguente:

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


 </main>
 )
}

Grande! A questo punto, dovresti essere in grado di gestire lo stato nell'app To-do Next.js utilizzando React Context.

Utilizzo dell'API React Context con altre tecnologie di gestione dello stato

L'API React Context è un'ottima soluzione per la gestione dello stato. Tuttavia, è possibile utilizzarlo insieme ad altre librerie di gestione dello stato come Redux. Questo approccio ibrido ti garantisce di utilizzare lo strumento migliore per le diverse parti della tua app che svolgono ruoli chiave.

In questo modo, puoi sfruttare i vantaggi di diverse soluzioni di gestione dello stato per creare applicazioni efficienti e manutenibili.