Tabla de contenido
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.
¿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 }), }))
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) => estado.osos) retorno <h1>{osos} por aquí...</h1>
} función Controles() { const aumentarPoblación = useBearStore((estado) => 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 }
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.
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.
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
¿Entiendes realmente Monorepo? 5 minutos para presentarle la arquitectura front-end a gran escala
Español 
繁體中文 
English 
简体中文 
한국어 
日本語