La API de contexto incorporada de React es perfecta para compartir estados. Descubra cómo usarlo con la última versión de Next.js.

Next.js ofrece varios enfoques para la gestión estatal. Si bien algunos de estos métodos requieren la instalación de nuevas bibliotecas, la API Context de React está integrada, por lo que es una excelente manera de reducir las dependencias externas.

Con React Context, puede pasar datos sin problemas a través de diferentes partes de su árbol de componentes, eliminando la molestia de la perforación de puntales. Esto es especialmente útil para administrar el estado global, como el estado de inicio de sesión del usuario actual o su tema preferido.

Comprender la API de contexto de React

Antes de profundizar en el código, es importante comprender qué es la API de contexto de React y qué problema aborda.

Los accesorios proporcionan un método eficaz para compartir datos entre componentes. Le permiten pasar datos de un componente principal a sus componentes secundarios.

instagram viewer

Este enfoque es útil porque muestra claramente qué componentes utilizan ciertos datos y cómo esos datos fluyen por el árbol de componentes.

Sin embargo, surgen problemas cuando tienes componentes profundamente anidados que necesitan consumir los mismos accesorios. Esta situación puede introducir complejidades y potencialmente dar como resultado un código complicado que sea más difícil de mantener. Estas cuestiones, entre otras, son las desventajas de la perforación con puntal.

React Context resuelve este desafío al proporcionar un método centralizado para crear y utilizar datos que deben ser accesibles globalmente, en todos los componentes.

Establece un contexto para contener estos datos, permitiendo que los componentes accedan a ellos. Este enfoque le ayuda a estructurar su código base para garantizar que esté bien organizado.

Puedes encontrar el código de este proyecto en su GitHub repositorio.

Comenzando con la administración de estados en Next.js 13 usando la API de contexto React

Los componentes de servidor Next.js le permiten crear aplicaciones que aprovechan lo mejor de ambos mundos: la interactividad de las aplicaciones del lado del cliente y los beneficios de rendimiento de la renderización del servidor.

Next.js 13 implementa componentes de servidor en el aplicación directorio, que ahora es estable, de forma predeterminada. Sin embargo, debido a que todos los componentes se procesan en el servidor, es posible que tenga problemas al integrar bibliotecas del lado del cliente o API como React Context.

Para evitar esto, una gran solución es la usar cliente bandera que puede configurar en archivos que ejecutarán código del lado del cliente.

Para comenzar, cree un proyecto Next.js 13 localmente ejecutando este comando en su terminal:

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

Después de crear el proyecto, navegue hasta su directorio:

cd next-context-api

Luego inicie el servidor de desarrollo:

npm run dev

Una vez que haya configurado un proyecto Next.js básico, puede crear una aplicación básica de tareas pendientes que utilice la API React Context para la gestión del estado.

Crear el proveedor de contexto

El archivo del proveedor de contexto sirve como un centro central donde define y administra el estado global al que los componentes necesitan acceder.

Crea un nuevo archivo, src/context/Todo.context.jsy complételo con el siguiente código.

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

Esta configuración de React Context define un TodoContexto que inicialmente contiene el estado de una lista de tareas pendientes vacía para la aplicación.

Además de crear el estado inicial, esta configuración de contexto incluye un reductor función que define varios tipos de acciones. Estos tipos de acciones modificarán el estado del contexto dependiendo de las acciones desencadenadas. En este caso, las acciones incluyen agregar, eliminar y editar tareas pendientes.

El TodoContextProvider componente proporciona la TodoContexto a otros componentes de la aplicación. Este componente requiere dos accesorios: el valor, que es el estado inicial del contexto, y el reductor, que es la función reductora.

Cuando un componente consume TodoContext, puede acceder al estado del contexto y enviar acciones para actualizar el estado.

Agregue el proveedor de contexto a la aplicación Next.js

Ahora, para garantizar que el proveedor de contexto se muestre en la raíz de su aplicación Next.js y que todos los componentes del cliente puedan acceder a él, debe agregar el contexto al componente de diseño raíz de la aplicación.

Para hacer esto, abra el src/app/layout.js archive y ajuste el nodo secundario en la plantilla HTML con el proveedor de contexto de la siguiente manera:

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

Crear un componente de tareas pendientes

Crea un nuevo archivo, src/componentes/Todo.jsy agréguele el siguiente código.

Comience por realizar las siguientes importaciones. Asegúrese de incluir el usar cliente bandera para marcar este componente como un componente del lado del cliente.

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

A continuación, defina el componente funcional, incluidos los elementos JSX que se representarán en el navegador.

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

Este componente funcional incluye campos de entrada para agregar, editar y eliminar tareas pendientes, junto con los botones correspondientes. Usa Representación condicional de React para mostrar los botones editar y eliminar según el valor del índice de edición.

Por último, defina las variables de estado requeridas y las funciones de controlador requeridas para cada tipo de acción. Dentro del componente de función, agregue el siguiente código.

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

Estas funciones de controlador están a cargo de manejar la adición, eliminación y edición de las tareas pendientes de un usuario dentro del estado del contexto.

Garantizan que cuando un usuario agrega, elimina o edita una tarea pendiente, las acciones apropiadas se envían al reductor del contexto para actualizar el estado en consecuencia.

Renderizar el componente de tareas pendientes

Finalmente, importe el componente Tareas pendientes al componente de página.

Para hacer eso, abra el archivo page.js en el directorio src/app, elimine el código repetitivo Next.js y agregue el siguiente código:

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


 </main>
 )
}

¡Excelente! En este punto, debería poder administrar el estado en la aplicación To-do Next.js usando React Context.

Uso de la API de contexto de React con otras tecnologías de gestión de estado

La API React Context es una gran solución para la gestión del estado. No obstante, es posible utilizarlo junto con otras bibliotecas de gestión estatal como Redux. Este enfoque híbrido garantiza que utilice la mejor herramienta para diferentes partes de su aplicación que desempeñan funciones clave.

Al hacerlo, puede aprovechar los beneficios de diferentes soluciones de gestión estatal para crear aplicaciones eficientes y fáciles de mantener.