redux y reaccionar-redux

redux y reaccionar-redux se usan directamente juntos, lo que me dificulta distinguir sus respectivos roles, así que organicémoslos por separado.

reudx

Para redux, todo el proceso es como se muestra arriba.

1. El usuario activa una operación en el componente UI a través de store.dispatch;

2. La tienda llama automáticamente al restaurador y pasa al estado anterior y la operación del usuario en 1. , Luego el restaurador devuelve el nuevo estado;

3. La tienda activa una operación en el componente de la interfaz de usuario a través de store.dispatch

4. El usuario activa una operación en el componente de la interfaz de usuario; a través de la operación store.dispatch y luego el restaurador devuelve el nuevo estado.

El diseño general de Redux es tal que toda la lógica que "escribes" se concentra en una sola función (el reductor), y la única forma de ejecutar esa lógica es pasarla a la interfaz de usuario de Redux. La única forma de ejecutar la lógica es pasar una acción a Redux que describa lo que está sucediendo. La tienda Redux llamará a estas funciones lógicas, pasará el árbol de estado actual y estos descriptores, devolverá el nuevo árbol de estado y luego la tienda Redux comenzará a notificar a los suscriptores sobre los cambios en el árbol de estado. Luego, la tienda Redux comienza a notificar a los suscriptores que el árbol de estado ha cambiado.

Por lo tanto, los restadores deben ser puramente funcionales y predecibles, no mutables.

reaccionar-redux

reaccionar-redux es esencialmente el paso 3 de la implementación de redux (resaltado en rojo).

Cada vez que se actualiza el estado, se realiza automáticamente la suscripción a la tienda mediante mapStateToProps para volver a calcular los parámetros del componente de la interfaz de usuario, lo que activa una nueva representación del componente de la interfaz de usuario. mapStateToProps es la lógica de entrada (introduce el estado en la interfaz de usuario de React);

mapDispatchToProps define qué acciones del usuario deben considerarse acciones y pasarse a la tienda de aplicaciones. mapDispatchToProps es la lógica de salida (convierte las operaciones del usuario en acciones y las emite desde la interfaz de usuario de React).

Componente contenedor = connect(mapStateToProps, mapDispatchToProps)(Componente UI);

mapStateToProps utiliza el estado inyectado en el almacenamiento en el componente proveedor como la propiedad reaccionar.context Implementación de la propiedad Contexto.

Información: