Explorando la gestión del estado en React usando Jotai: una guía práctica

Administrar el estado en proyectos de pequeña escala es generalmente sencillo usando ganchos y accesorios de React. Sin embargo, a medida que la aplicación crece y surge la necesidad de compartir y acceder a datos a través de diferentes componentes, a menudo conduce a la perforación de puntales. Desafortunadamente, la perforación de apoyo puede saturar rápidamente la base de código e introducir desafíos de escalabilidad.

Si bien Redux ofrece una excelente solución de administración de estado, su API puede ser abrumadora para proyectos relativamente pequeños. Por el contrario, Jotai, una biblioteca de administración de estados mínima que aprovecha unidades independientes de estados llamadas átomos para administrar estado, elimina desafíos como la perforación de apoyo y permite una gestión de estado más sencilla y escalable acercarse.

¿Qué es Jotai y cómo funciona?

Jotai es una biblioteca de administración de estado que ofrece una solución de administración de estado simple en contraste con alternativas más complejas como Redux. Utiliza unidades de estado independientes llamadas átomos para administrar el estado en la aplicación React.

Idealmente, diferentes componentes en la aplicación, acceden y actualizan estos átomos usando un enlace provisto por Jotai llamado usarátomo. Aquí hay un ejemplo simple de cómo crear un átomo Jotai:

importar {átomo} de'jotai';
constante contarátomo = átomo(1);

Para acceder y trabajar con átomos en Jotai, simplemente puede usar usarátomo gancho que, como otros Ganchos de reacción, le permite acceder y actualizar el valor de un estado dentro de un componente funcional.

He aquí un ejemplo para demostrar su uso:

importar { usarátomo } de'jotai';
constante contarátomo = átomo(1);
funciónmicomponente() {
constante [contar, establecerCuenta] = usarAtomo (contarAtomo);
constante incremento = () => establecerCuenta((prevCount) => cuenta anterior + 1);
devolver (


Contar: {contar}/p>
Incremento</button>
 </div>
 );
}

En este ejemplo, el usarátomo gancho se utiliza para acceder a la contarátomo átomo y su valor asociado. El establecerCuenta La función se utiliza para actualizar el valor del átomo y cualquier componente asociado se volverá a representar automáticamente con el valor actualizado.

Al activar solo los componentes afectados, reduce los renderizados innecesarios en toda la aplicación. Este enfoque específico para volver a renderizar mejora el rendimiento general de la aplicación.

Con los conceptos básicos fuera del camino, construyamos una aplicación To-do React simple para comprender mejor las capacidades de administración de estado de Jotai.

Gestión de estado en React usando Jotai

Para empezar, crear una aplicación React. Alternativamente, puede utilizar Vite para configurar un proyecto React. Una vez que construya una aplicación básica de React, continúe e instale Jotai en su aplicación.

npm instalar jotai

Luego, para utilizar Jotai en su aplicación, debe envolver toda su aplicación con el Proveedor componente. Este componente contiene el almacén que sirve como eje central para proporcionar valores atómicos en toda la aplicación.

Además, te permite declarar el estado inicial de los átomos. Al envolver su aplicación con el Proveedor, todos los componentes de la aplicación obtienen acceso a los átomos que ha definido, y luego pueden interactuar y actualizar el estado a través del usarátomo gancho.

importar { Proveedor } de"jotai";

Ahora envuelva la aplicación en el índice.js o principal.jsx Como se muestra abajo.

importar Reaccionar de'reaccionar'
importar ReactDOM de'reaccionar-dom/cliente'
importar aplicación de'./Aplicación.jsx'
importar'./index.css'
importar { Proveedor } de"jotai";
ReactDOM.createRoot(documento.getElementById('raíz')).prestar(



 </Provider>
 </React.StrictMode>,
)

Configurar un almacén de datos

La tienda actúa como depósito central del estado de la aplicación. Por lo general, contiene la definición de átomos, selectores y cualquier otra función relacionada requerida para la gestión del estado usando Jotai.

En este caso, administra los átomos para administrar la lista de elementos para la aplicación To-do. En el origen directorio, crear TodoStore.jsx y agregue el código a continuación.

importar {átomo} de"jotai";
exportarconstante TodosÁtomo = átomo([]);

Al crear y exportar el TodosAtom, puede interactuar cómodamente y actualizar el estado de las tareas pendientes en diferentes componentes de la aplicación.

Implementar la funcionalidad de la aplicación Tareas pendientes

Ahora que configuró Jotai en la aplicación React y creó un átomo para administrar el estado de la aplicación, vaya adelante, y cree un componente simple de tareas pendientes que manejará las funcionalidades de agregar, eliminar y editar para las tareas pendientes. elementos.

Crear un nuevo componentes/Todo.jsx archivo en el origen directorio. En este archivo, agregue el siguiente código:

1. Importar el almacén de datos y el usarátomo gancho.

   importar Reaccionar, { estado de uso } de'reaccionar';
   importar { TodosAtom } de'../TodoTienda';
   importar { usarátomo } de'jotai';

2. Cree el componente funcional y agregue los elementos JSX.

   constante Todo = () => {
   
   devolver (
   
   
    marcador de posición ="Nuevo todo"
    valor={valor}
    onChange={evento => setValue (evento.objetivo.valor)}
    />
   Añadir todo</button>
   
   
    {todos.mapa(hacer => (
   
   
    {todo.texto}
    handleDelete (todo.id)}>Eliminar</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };