Gestión del estado de React: reaccionar-redux y redux-saga (para usuarios que cambian de vue a reaccionar)

Nota: este artículo no cubrirá todos los puntos de conocimiento a la vez y no es adecuado para lectores novatos.

En primer lugar, Redux es una solución de gestión de estado, que a su vez tiene. Sin conexión con reaccionar, también se puede utilizar junto con otros marcos.

reaccionar-redux es una implementación de gestión de estado basada en reaccionar. No está integrada directamente en la aplicación create-react como vuex. Debe instalarla usted mismo.

react-redux tiene tres conceptos importantes: tienda, acción y reductor.

1. store store es un repositorio que almacena el estado de los datos globales. Se ve así:

Tenga en cuenta que este estado es de solo lectura, lo que significa que no podemos modificar los datos en el almacenamiento a través de initState.xxx1 = "233".

De hecho, en el trabajo del proyecto, el almacenamiento no se coloca en store.js. Store.js generalmente realiza algunas operaciones para crear almacenamiento, registrar leyendas y el estado generalmente se coloca en un módulo específico reducer.js. en (un módulo debe tener action.js y action.js). js (un módulo debe tener action.js, reducer.js, saga.js)

State.xxx1="233", lo que significa que no podemos modificar los datos almacenados a través de initState.xxx1="233" datos. Tres archivos)

2. acción.

Como se mencionó anteriormente, el estado es de solo lectura, por lo que solo podemos modificar los datos en el almacenamiento programando acciones.

Siempre he sentido que la expresión acción de envío es incómoda. De hecho, es una traducción literal de acción de envío.

Una operación consta de dos partes: tipo y carga útil.

El tipo es en realidad la identificación de la operación, que es una cadena constante utilizada para explicar el propósito de la operación. Por ejemplo, escriba: "GET_USERNAME": "GET_USERNAME" significa que la operación se utiliza para. obtener el nombre de usuario. Por ejemplo, escribir "GET_USERNAME" significa que la operación se utiliza para obtener el nombre de usuario y la carga útil es el parámetro necesario para llamar a la API.

Nota: Esta operación se enviará al almacenamiento.

3. Reductor.

Los reductores reciben estado y operaciones y devuelven estado.

Después de recibir la operación, el almacenamiento pasará la operación y el estado actual al reductor. El reductor determinará qué operación realizar según el tipo de operación y luego devolverá el nuevo estado al almacenamiento. , por ejemplo: return { ... .state,name: "nombre de usuario obtenido por interfaz"}

El diagrama de flujo de trabajo es el siguiente:

Este proceso es muy fácil de entender. Hablemos del proceso de restauración Qué buscar en el dispositivo. (

El reductor debe ser una función pura

Una función pura es una función cuyo resultado devuelto depende solo de los parámetros que se le pasan y no puede tener efectos secundarios

Los efectos secundarios se refieren a operaciones asincrónicas, operaciones DOM, etc.

Bueno, no entendiste que, como humanos, no puedes realizar solicitudes asincrónicas en el reductor. ¡En nuestro trabajo, definitivamente llamamos interfaces! Para obtener datos de forma asincrónica, en este caso, confiar solo en reaccionar-redux no puede satisfacer nuestras necesidades, y redux-saga está diseñado para resolver este problema

Si está familiarizado con vuex, lo sabrá. vuex tiene mutaciones y acciones, donde las mutaciones envían métodos para actualizar datos, el método solo puede ser sincrónico, mientras que las acciones pueden contener operaciones asincrónicas y las acciones envían mutaciones.

La relación entre mutaciones y acciones es similar a la relación entre reductores y saga: la saga llama a la interfaz para obtener los datos, luego envía la acción al reductor y finalmente devuelve el nuevo estado al almacenamiento. .

saga incluye la función watch-saga y la función work-saga. En la función de trabajador-saga, watch-saga se utiliza para monitorear las operaciones enviadas desde el sistema. Una vez que watch-saga monitorea una operación, ejecutará las operaciones de trabajador-saga correspondientes de forma asincrónica (llamando a la interfaz para solicitar datos, etc.). .), después de obtener los datos, se enviará a la segunda operación. Después de obtener los datos, enviará la segunda operación al almacenamiento, y el almacenamiento enviará el estado y la operación al reductor (por lo que esto es lo mismo). proceso como sin saga).

Con saga, el flujo de trabajo cambiará:

Notamos que hay dos operaciones en el flujo de trabajo, por lo que se puede entender que la primera operación es para monitorear la leyenda, la segunda La operación se utiliza para enviar la leyenda del trabajador al almacenamiento después de la operación asincrónica.

El flujo de trabajo después de agregar una leyenda es el siguiente: