¿Qué es Zustand? Reaccionar la gestión del estado front-end

zustand
Zustand

 

mascota de zustand

Prefacio

¿Por qué quieres compartir esta tecnología?

Zustatnd en sí es una tecnología relativamente nueva en comparación con Redux, y también es una tecnología de gestión de estado front-end que el equipo intentó introducir cuando estaba trabajando. A través de una introducción práctica, obtuve algunas experiencias y pensamientos que me dieron la idea de escribir este artículo.

¿Qué problemas se encuentran con la arquitectura existente?

Ya sea que use Redux o Context para manejar la gestión del estado, es más complicado que Zustand. Para los ingenieros que se unan a este proyecto más adelante, definitivamente llevará tiempo comprenderlo. El objetivo principal de Zustand es hacer que la gestión del estado del front-end sea relativamente simple y fácil de entender. Esta característica también hace que Zustand sea la elección de algunas empresas.


Sobre la gestión estatal

Antes de presentar a Zustand, hablemos de qué es la “gestión estatal”.

Las páginas web actuales son cada vez más complejas y existen diferencias entre el front-end y el back-end. El front-end se centra más en la presentación de la pantalla, UI \ UX, el flujo de usuarios, si los diferentes dispositivos tienen versiones en ejecución... etc.
El backend es más funcional, incluida la gestión de bases de datos, inicio de sesión, registro, etc.

A medida que el front-end se vuelve cada vez más complejo, el concepto de marco ha comenzado a surgir. Los tres marcos más populares actualmente son React, Vue y Angular.

Los diferentes marcos también tendrán diferentes métodos de "gestión estatal", como por ejemplo:
Reaccionar: Básicamente solo necesita administrar datos y representarlos por "estado"
Vue: existe un "enlace bidireccional" de datos y componentes

Basado en el marco de React, se puede dividir aproximadamente en

Estado local

    • usoEstado

    • utilizarReductor

Contexto

    • utilizarContexto

Tercero

    • redux

    • mobx

    • Zustand

Debería ser comprensible cuando vea esto. Simplemente la "gestión del estado" en un marco de React ya es bastante complicada.

Por lo tanto, este artículo solo explicará Zustand y también utilizará ejemplos para presentarlo.

También podemos conocer la popularidad de Redux, Mobx y Zustand en el último año a través de la siguiente comparación del total de descargas de paquetes.

Zustand npm descargar

 

https://npmtrends.com/mobx-vs-react-redux-vs-zustand


¿Qué es Zustand?

Según la declaración oficial de Zustand, se trata de una suite de "gestión de estado" ligera y rápida basada en los conceptos de Flux y Hook.

PD: ¡El oso de arriba es la mascota icónica de Zustand!

Entre ellos, Zustand también se utiliza para resolver algunos problemas complejos de gestión del estado de React, como: Zombie Child Problem, React Concurrency, Context Loss.

Si quieres saber más sobre cuáles son estos problemas, puedes consultar el siguiente enlace

Problema del niño zombi:Reaccionar archivos Redux

Reaccionar concurrencia:Reaccionar documentación oficial

Reaccionar pérdida de contexto:Desbordamiento de pila

También podemos saber por los funcionarios de Zustand su ambición de derrotar a Redux.


Uso de Zustand

Los siguientes dos usos simples son para usuarios de JavaScript.

Crea la primera tienda

Zustand está construido en base a Hook, por lo que lo primero que se crea es la Tienda creada por Custom Hook, que puede contener variables, objetos y funciones.Y puede utilizar Set y Get para realizar la "gestión del estado" de los datos.

				
					importar crear desde 'zustand' const useBearStore = crear((establecer) => ({ osos: 0, aumentarPopulación: () => establecer((estado) => ({ osos: estado.osos + 1 })), removeAllBears: () => establecer({ osos: 0 }), }))
				
			
Unión a componentes

Debido a que utiliza Hook, se puede cargar directamente en cualquier componente para su uso.
También puede representar estos estados y puede ver que el procesamiento se puede completar en solo unas pocas líneas, lo cual es una gran bendición en Zustand.

Aquí también proporcionamos un ejemplo simple de Zustand para usuarios de TypeScript.

				
					función BearCounter() { const osos = useBearStore((estado) =&gt; estado.osos) retorno <h1><span class="ez-toc-section" id="bears-around-here"></span>{osos} por aquí...<span class="ez-toc-section-end"></span></h1>
} función Controles() { const aumentarPoblación = useBearStore((estado) =&gt; estado.incrementarPoblación) return <button onclick="{increasePopulation}">uno arriba</button>
}

				
			

Método de escritura Zustand TypeScript

En Zustand usaremos create para crear una nueva tienda. 
Páselo a través de la función, devuelva el estado a través de Hook y vuelva a renderizar.

				
					importar crear desde "zustand" tipo Producto = { sku: cadena: nombre: cadena; imagen: cadena } tipo CartState = { productos: Producto[] carrito: { [sku: cadena]: número } addToCart: (sku: cadena) = > void removeFromCart: (sku: string) => void } // Selectores // ... // Inicializamos nuestra tienda con valores iniciales y acciones para mutar el estado export const useCart = create<CartState>(set => ( { productos : [ // ... ], carrito: {}, // Acciones // ... }))
				
			

Los métodos de escritura de Redux y Mobx también se muestran aquí. Los lectores también pueden comparar las diferencias. Sin embargo, este artículo no explicará Redux o Mobx, solo explicará Zustand y su gestión de estado.

Método de escritura Redux TypeScript

				
					import { createSlice, configureStore, PayloadAction } de "@reduxjs/toolkit" import { TypedUseSelectorHook, useDispatch, useSelector } de "react-redux" // Slices // Definir la forma del estado y cómo mutarlo type ICart = { [ sku: cadena]: número } const cartInitialState: ICart = {} const cartSlice = createSlice({ nombre: "carro", estado inicial: cartInitialState, reductores: { // ... }, }) tipo IProduct = { sku: cadena; nombre: cadena; imagen: cadena } const productosInitialState: IProduct[] = [ // ... ] const productosSlice = createSlice({ nombre: "productos", estado inicial: productosInitialState, reductores: {}, }) // Acciones // ... // Selectores // ... // Almacenar exportación const store = configureStore({ reductor: { carrito: cartSlice.reducer, productos: productosSlice.reducer, }, }) // ... const App = () => { return ( <Provider store={store}> <NavigationContainer> <Stack.Navigator>{/* ... */}</Stack.Navigator> <StatusBar style="auto" /> </NavigationContainer> < /Proveedor> ) }
				
			

Método de escritura Mobx TypeScript

				
					importar { tipos, Instancia } de "mobx-state-tree" const Producto = tipos.model({ sku: tipos.string, nombre: tipos.string, imagen: tipos.string, }) // Modela y escribe nuestros datos con árbol de estado de mobx const CartStore = tipos .model("CartStore", { productos: tipos.array(Producto), carrito: tipos.map(tipos.número), }) // Acciones para mutar el estado .actions(store => ({ // ... })) // Las vistas son como selectores .views(self => ({ // ... })) type CartStoreType = Instance<typeof CartStore> // Activa un gancho para usar nuestra tienda y proporcione valores iniciales let _cartStore: CartStoreType export const useCart = () => { if (!_cartStore) { _cartStore = CartStore.create({ productos: [ // ... ], carrito: {}, } ) } devolver _cartStore }
				
			

¿Puede Zustand superar a Context y Redux?

 

https://github.com/pmndrs/zustand#why-zustand-over-redux

Según el funcionario de Zustand, los puntos anteriores se enumeran y explican brevemente aquí.

redux

Redux en sí es una herramienta de gestión de estado relativamente compleja, con procesos de Actioins, View y State.

El siguiente es el diagrama de flujo de datos oficial de Redux. También puede saber que si desea utilizar la herramienta de administración de estado de Redux desde cero, el umbral de aprendizaje es relativamente alto.

Flujo de datos redux

 

Flujo de datos redux

Flujo de datos de Redux y ciclo de vida de los componentes de React
Casi todos los que quieren aprender Redux habían visto esta imagen antes. Es bastante sencillo para mí en este momento, pero...dev.to

Contexto

Aunque el contexto en sí está clasificado como gestión estatal, en realidad se parece más a una forma centralizada de activar estados.

En comparación con Zustand, estará disperso en varios archivos, lo que dificultará su administración.

Flujo de datos de contexto

 

Flujo de datos de contexto

[Reaccionar] API de contexto
Para administrar los datos en React, puede usar Props, State y Context. En esta publicación de blog, presentaré qué es Context...dev-yakuza.posstree.com


Conclusión

Ventajas de utilizar esta tecnología

A través de Zustand, los datos y la lógica en la lógica empresarial compleja se separan y estas cosas se modularizan. Además de aumentar la legibilidad, también facilita la redacción de pruebas.

Reseñas

Zustand en sí es una herramienta de gestión de estado que es fácil de aprender y también es relativamente conveniente de usar en productos de trabajo. Es relativamente conveniente configurar y obtener el estado o usarlo en componentes. trabajar en React Lector de gestión de estado.

Gracias por mirar ~ Si tiene alguna pregunta sobre el contenido anterior o desea discutirlo, no dude en dejar un mensaje o enviarme un mensaje privado.

Cita

https://github.com/pmndrs/zustand

https://react-redux.js.org/api/hooks#stale-props-and-zombie-children

https://docs.pmnd.rs/zustand/getting-started/comparison

Otras referencias de artículos

¿Por qué las grandes empresas utilizan Nx? La herramienta Monorepo se puede configurar rápidamente en 5 minutos.

¿Entiendes realmente Monorepo? 5 minutos para presentarle la arquitectura front-end a gran escala

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

es_ESEspañol