La administración de estado se encuentra en el corazón de las aplicaciones web modernas y desempeña un papel vital en la administración de los datos de los usuarios y la captura de sus interacciones. Ya sea llenar un carrito de compras en una plataforma de comercio electrónico o mantener una sesión de usuario iniciada después de la autenticación, estas acciones son posibles a través de una administración de estado eficiente.

Esencialmente, los administradores estatales permiten que las aplicaciones accedan a los datos y los procesen para producir los resultados deseados. Next.js brinda soporte para múltiples soluciones de administración de estado. Sin embargo, en esta guía, nos centraremos en utilizar Redux Toolkit para la gestión del estado.

En las aplicaciones de Next.js, la administración de estado generalmente involucra dos tipos de estados: estado global y estado de componente. El estado global contiene información compartida por todos los componentes de la aplicación, como el estado de autenticación de un usuario, mientras que el estado del componente almacena datos específicos de componentes individuales.

Tanto el estado global como el de los componentes juegan un papel vital en la gestión del estado general de la aplicación, lo que facilita el manejo eficiente de los datos.

Redux es ampliamente adoptado como una solución de gestión de estado en todo el mundo. varios marcos de JavaScript. Sin embargo, puede presentar complejidades, particularmente para proyectos más pequeños.

Un inconveniente común es la necesidad de escribir código modelo repetitivo para definir tipos de acción, creadores de acción y reductores. Esto puede conducir a una mayor redundancia de código.

Para superar estos desafíos, Kit de herramientas Redux (RTK) viene al rescate. Su objetivo principal es agilizar la experiencia de desarrollo cuando se trabaja con el Biblioteca de gestión de estado de Redux. Proporciona un conjunto de herramientas y utilidades que simplifican las tareas comunes de Redux, eliminando la necesidad de un código repetitivo excesivo.

Ahora, profundicemos en el uso de Redux Toolkit para administrar el estado en las aplicaciones Next.js. Para comenzar, cree un proyecto Next.js e instale las dependencias requeridas siguiendo los pasos a continuación.

1. Cree un nuevo proyecto Next.js localmente ejecutando el siguiente comando en su terminal:

   npx create-next-app@latest next-redux-toolkit

2. Después de crear el proyecto, navegue al directorio del proyecto ejecutando:

   cd next-redux-kit de herramientas

3. Por último, instala las dependencias necesarias en tu proyecto usando npm, el administrador de paquetes de Node.

   npm instalar @reduxjs/toolkit reaccionar-redux

Una vez que configure un proyecto básico de Next.js, estará listo para crear una aplicación de demostración de Next.js que utilice Redux Toolkit para la administración del estado.

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

Configurar la tienda Redux

Una tienda Redux es un contenedor central que contiene el estado completo de la aplicación. Sirve como fuente única de datos de la aplicación, proporcionando estados a cada componente. La tienda es responsable de administrar y actualizar el estado a través de acciones y reductores, lo que facilita la administración del estado en toda la aplicación.

Para construir una tienda Redux, crea una nueva reducir carpeta en el directorio raíz de su proyecto Next.js. Dentro de esta carpeta, crea una nueva tienda.js archivo y agregue el siguiente código:

importar {configurar tienda} de'@reduxjs/kit de herramientas';
importar perfilreductor de'./reductores/profileSlice';
exportarpor defecto configureStore({
 reductor:{
 perfil: perfilReductor
 }
})

El código anterior utiliza configureStore función para crear y configurar la tienda Redux. La configuración de la tienda incluye la especificación de reductores utilizando el reductor objeto.

Los reductores, en este caso, especifican cómo debe cambiar el estado de la aplicación en respuesta a acciones particulares o eventos específicos. En este ejemplo, el perfil reducer es responsable de gestionar las acciones relacionadas con el estado del perfil.

Al configurar la tienda Redux, el código establece la estructura central para administrar el estado de la aplicación utilizando Redux Toolkit.

Definir sectores de estado

Los segmentos de estado de Redux son componentes que encapsulan la lógica para administrar el estado de elementos de datos específicos dentro del almacén de redux configurado. Estos cortes se crean usando el crearRebanada función, que genera automáticamente el reductor, los creadores de acciones y los tipos de acción para el segmento.

En el reducir directorio, crea una nueva carpeta y asígnale un nombre reductores. Dentro de esta carpeta, crea perfilSlice.js archivo y agregue el siguiente código.

importar {crear segmento} de'@reduxjs/kit de herramientas';
constante rebanada de perfil = crear rebanada ({
 nombre: 'perfil',
 estado inicial: {
 nombre: 'ninguno'
 },
 reductores: {
 ESCOGER UN NOMBRE: (estado, acción) => {
 estado.nombre = acción.carga útil
 }
}})
exportarconstante {SET_NAME} = profileSlice.actions;
exportarpor defecto perfilSlice.reductor;

En el código proporcionado, el crearRebanada La función crea un segmento de estado para el estado del perfil de usuario. El rebanada de perfil El objeto incluye el nombre del segmento y su estado inicial, que contiene los valores predeterminados para las propiedades de estado.

Además, el objeto de división también toma una reductores propiedad que define los controladores de acción para este segmento. En este caso, una sola función reductora llamada ESCOGER UN NOMBRE. Esencialmente, una vez que llame a esta función, actualizará la propiedad de nombre del estado con los datos proporcionados.

El crearRebanada La función genera creadores de acciones y tipos de acciones automáticamente en función de los reductores definidos. el exportado ESCOGER UN NOMBRE creador de acciones y perfilSlice.reductor representa el creador de la acción generada y la función reductora para el sector del perfil.

Al crear este segmento de estado, los componentes dentro de la aplicación pueden utilizar el ESCOGER UN NOMBRE acción y pase la carga útil deseada para actualizar el nombre del perfil en el estado.

Cree un componente para probar la funcionalidad de administración de estado de RTK

Abre el índice.js archivo en el paginas directorio, elimine el código estándar de Next.js y agregue el siguiente código.

importar estilos de'@/estilos/Inicio.módulo.css'
importar {usarRef} de'reaccionar'
importar {usarSelector, usarDispatch} de'reaccionar-redux'
importar {ESCOGER UN NOMBRE} de'../../redux/reductores/profileSlice'
funciónNombre para mostrar(){
constante {nombre} = usarSelector((estado) => estado.perfil)
devolver (

 ¡¡Soy {nombre}!!</h1> 
 ) }
exportarpor defectofunciónHogar() {
constante inputName = useRef()
constante despacho = useDispatch()
funciónenviarNombre() {
consola.log (nombreEntrada.actual.valor)
 despacho (SET_NAME(inputName.current.value))
 }
devolver (
 <>

'Ingrese su nombre' ref={nombre de entrada} />
Introduce el nombre</button>

 </main>
 </>
 )}

El código anterior crea y representa un componente Next.js que permite al usuario ingresar un nombre y mostrar el nombre proporcionado en la página del navegador. Efectivamente, administrando el estado de la aplicación usando Redux Toolkit.

El Nombre para mostrar componente utiliza el usarSelector gancho para acceder a la nombre propiedad del estado del perfil en la tienda Redux y lo muestra en la página.

Para ingresar un nombre, un usuario hace clic en el Ingrese su nombre botón. Esto invoca la enviarNombre función, que despacha el ESCOGER UN NOMBRE acción con el valor de entrada como carga útil. Esta acción actualiza la propiedad de nombre en el estado del perfil.

Actualice el archivo _app.js

Finalmente, para configurar Redux Toolkit para su uso en toda la aplicación Next.js, debe envolver la aplicación con el Proveedor de Redux: esto garantiza que la tienda de Redux y los estados disponibles sean accesibles para todos los componentes en el solicitud.

Abre el _app.js archivo y actualícelo de la siguiente manera:

importar {Proveedor} de'reaccionar-redux'
importar almacenar de'../../redux/tienda'
exportarpor defectofunciónaplicación({ Componente, accesorios de página }) {
devolver (


 </Proveedor> )
}

Ahora, continúe e inicie el servidor de desarrollo para reflejar los cambios que realizó y navegue hasta http://localhost: 3000 en su navegador para probar la aplicación.

npm ejecutar dev

Manejo de la rehidratación de datos en la recarga de página

La rehidratación de datos en la recarga de la página se refiere al proceso de restauración e inicialización del estado de la aplicación cuando se recarga una página. En una aplicación Next.js renderizada por el servidor, el estado inicial se renderiza primero en el servidor y luego se envía al cliente.

En el cliente, el código JavaScript es responsable de reconstruir el estado de la aplicación al recuperar y deserializar el estado serializado recibido del servidor.

Al hacerlo, la aplicación puede restaurar sin problemas los datos necesarios y preservar la sesión del usuario. Este enfoque evita la obtención innecesaria de datos y garantiza una experiencia de usuario ininterrumpida al navegar entre páginas o recargar la aplicación.

Una de las ventajas de usar Redux Toolkit en las aplicaciones Next.js es su simplicidad y características fáciles de usar para desarrolladores. Reduce significativamente el código repetitivo requerido para definir acciones, reductores y configuración de la tienda, lo que facilita y hace más eficiente el trabajo con Redux en la administración del estado.