Tres conceptos y tres núcleos de redux
Un componente puede tener muchos estados, como controlar la visualización de un logotipo de contenido y obtener datos de visualización en segundo plano. Luego, estos estados se pueden administrar en su propia página única o se pueden seleccionar otros métodos de administración. Redux es una especie de gestión estatal.
2. ¿Por qué utilizar redux?
(1) Intercambio de datos: cuando tenemos muchas páginas que utilizan los mismos datos, podemos poner los datos en redux para lograr el propósito de compartir el estado.
(2) Fusionar gestión de estados Puede haber muchos estados que deban mantenerse en el negocio y puede haber interdependencias entre los estados. Sin una gestión unificada, será difícil realizar un seguimiento de los cambios de estado.
3. Conceptos básicos de redux
(1) tienda
La tienda es un almacén que se utiliza para almacenar datos. Puede obtener datos y enviarlos. También puede monitorear los cambios de datos.
(2) acción
La acción puede entenderse como acción. El valor de la acción suele ser un objeto en el formato {tipo: "", datos: ""}. El tipo es necesario porque el restador procesa los datos de manera diferente según el tipo.
(3) Reductor
El reductor es una función pura que se utiliza para inicializar y procesar operaciones enviadas.
4. ¿Cómo utilizar redux?
Primero, instale las dependencias de redux, npm i redux -D
(1) Defina la acción
(2) Defina el reductor que maneja la acción
p >(3) Crear almacenamiento
Aquí, cree almacenamiento. Después de crear el almacenamiento, puede introducir directamente el almacenamiento y las acciones en el componente para enviar la acción; en este momento hay un componente de Inicio donde queremos cambiar los datos en el estado.
5. Los tres núcleos de redux
(1) Fuente de datos única
Cuando tenemos varios datos que deben administrarse en redux, es en un objeto, este objeto se administra en el almacenamiento. Aunque redux no fuerza la creación de un solo almacenamiento, múltiples fuentes de datos no son tan fáciles de administrar y una sola fuente de datos puede rastrear mejor el estado. Una única fuente de datos permite un mejor seguimiento de los cambios de estado.
(2) El estado es de solo lectura
Si desea cambiar el estado, no puede cambiar manualmente el valor del estado directamente en el componente. Esto garantiza que el estado. no se cambiará arbitrariamente. La única forma de cambiar el estado es enviar una acción, que se administra de forma centralizada.
(3) El reductor es una función pura
Función pura
El reductor es una función pura
El reductor es una función pura función función.
Una función pura significa que si las entradas son iguales, las salidas deben ser iguales. En este caso, no puede modificar los parámetros de entrada, enviar solicitudes de red ni hacer cosas como obtener números aleatorios; el restador concatena el estado anterior con la operación actual y devuelve un nuevo estado.
6. ¿Cómo realiza Redux operaciones asincrónicas?
Las acciones enviadas en redux solo pueden ser operaciones sincrónicas de forma predeterminada y las acciones se especifican como objetos. Entonces, ¿qué sucede si desea realizar operaciones asincrónicas en redux, como enviar solicitudes de red?
En este momento necesitas usar middleware. Los middleware más utilizados son redux-thunk y redux-saga. Debes instalar la dependencia npm i redux-thunk -D/ npm i redux-sage -D. /p >
redux-thunk permite enviar acciones en forma de funciones, donde puedes realizar solicitudes asincrónicas.
La operación enviada por redux-saga sigue siendo un objeto, pero saga interceptará la operación externamente y utilizará la función del generador para escuchar la operación, y luego el tipo en la operación enviada será consistente con el escriba que escucha, envía solicitudes de red y cambia los datos almacenados.
A continuación se muestra una demostración de redux-thunk en la definición de almacenamiento, debe pasar el middleware.
Las acciones se pueden escribir en forma de funciones.
7. Desmontaje de reductores divididos
Cuando un reductor necesita procesar mucha lógica, un reductor necesita realizar muchos juicios de casos de cambio. Tiene permiso para acceder a datos de solicitudes asincrónicas y tiene un estado guardado globalmente. La lógica será confusa en este momento, el reductor se puede dividir y luego fusionar.
Supongamos que hay dos reductores en este momento, a saber, countReducer y userInfoReducer. Los estados almacenados respectivamente se guardan en countInfo y userInfo. En este momento, puede usar el método combineReducer para fusionar.
Este El reductor devuelto sigue siendo una función pura. La función combineReducer ejecuta los reductores entrantes en orden. Si el valor almacenado en el área de almacenamiento cambia, se devuelve el nuevo estado. Si no hay cambios, se devuelve el estado original.