Siguiente no declarado: Biblioteca de gestión de estado ligero para ReactJS | Parte 1

Es posible que haya utilizado muchas bibliotecas de administración de estado para ReactJ como Redux, Recoil MobX e incluso Unstated, pero ¿alguna vez pensó que puede administrar todo el estado de su aplicación con solo usar 300 bytes de código? Puede ser posible mediante el uso de la biblioteca de administración de estado siguiente no declarado.

¿Qué es lo siguiente no declarado?

Es una biblioteca de administración de estado liviana construida sobre la API de contexto de Reacts mediante la cual podemos administrar aplicaciones de reacción de estado global. A medida que crece nuestra aplicación, agregamos muchos componentes, y administrar estos componentes y compartir estados entre componentes se convierte en una tarea muy tediosa en ReactJS. Para resolver este problema, muchas comunidades de código abierto han desarrollado bibliotecas de gestión estatal. Las bibliotecas de administración de estado difieren entre sí en sus características. Por lo tanto, es difícil elegir uno sobre el otro. En este artículo, explicaremos en qué se diferencia Unstated-next de otras bibliotecas de administración de estado, cómo funciona y cómo puede integrarlo en su aplicación.

¿Cuáles son las ventajas de Unstated Next sobre otras bibliotecas de administración de estado?

Al observar el gráfico anterior, podemos decir claramente que Unstated Next tiene un tamaño más pequeño en comparación con otras bibliotecas. y además es muy sencillo de usar, con solo escribir 10 líneas de código podemos controlar directamente el estado global de nuestra aplicación. Además, se puede utilizar en aplicaciones complejas (se explicará en tutoriales posteriores). tiene más de 50k descargas semanales.

Puntos clave:

• Tamaño de paquete bajo.
• Fácil de implementar.
• Curva de aprendizaje poco profunda (rápida).
• También se puede utilizar en aplicaciones complejas.

Métodos de API Next no declarados

1. createContainer (ganchos personalizados) Con este método, creamos un contenedor que nos devolverá el método Provider y useContainer. Por ejemplo, si está creando una tienda para usuarios, use should create:

// return { Provider, useContainer }
let userContainer = createContainer(userHook);

• Proveedor: es un componente de reacción que actúa como proveedor de la aplicación.
• useContainer: con este podemos acceder a los campos y métodos de los usuarios.

2. Proveedor: es un componente de React que permite que los componentes secundarios accedan a la tienda global de aplicaciones.

return (
   <Provider>
       <ChildComponet_1 />
        ...
       <ChildComponet_N />
   </Provider>
);

3. useContainer: es un gancho de reacción que toma CustomContainer como entrada y devuelve su campo y métodos.

let { name, onSubmit } = useContainer(userContainer);
return (
<h1> Name : {name} </h1>
   <input type="submit" name="submit" onChange={onSubmit} />
);

Creando la aplicación React:

Paso 1: Cree una nueva aplicación de reacción usando el siguiente comando.

npx create-react-app example

Paso 2: cd en el directorio del proyecto.

cd example

Paso 3: Instale un paquete.

npm i unstated-next

Paso 4: ejecuta tu aplicación usando el siguiente comando.

npm start

Estructura del proyecto: después de esto, la estructura de carpetas se ve así:

Ejemplo: este ejemplo creará un contador similar a una publicación.

Aplicación.js