Ciclo de vida de datos en Redux
Contenido del curso
Ciclo de vida de datos en Redux
Contenido del curso
Miguel Angel Reyes Moreno
Juan Pablo Jimenez
3.-Ciclo de vida de Redux
--
-- Redux es una libreria “agnostica”, es decir, puede ser usada con cualquier capa en la UI o framework.
David Portocarrero Caicedo
Actualización de la imagen: En versiones resiente Redux incorpora middlewares para el registro de acciones, la administración de peticiones asíncronas, la gestión de errores, la autenticación, entre otros.
Juan Camilo Lentino Villalba
Gualberto Montiel
CICLO DE VIDA REDUX Despacho de una acción: Un evento de UI, una respuesta de red o cualquier otra fuente despacha una acción, que es un objeto de JavaScript simple que describe el cambio a realizar.
Actualización del almacén: El almacén de Redux recibe la acción despachada y la pasa a la función reductora. El reductor calcula el nuevo estado en base al estado actual y la acción.
Actualización de los componentes: El almacén emite un evento de cambio, lo que hace que los componentes que están suscritos al almacén vuelvan a renderizarse. El nuevo estado está disponible en el almacén y puede ser utilizado por los componentes para renderizar la UI actualizada.
El usuario interactúa con la UI actualizada: El usuario interactúa con la UI actualizada, potencialmente provocando otro despacho de acción. Esto comienza el ciclo nuevamente.
Nota: Es importante recordar que el estado debe tratarse como inmutable y no modificarse directamente. Se deben crear nuevos estados para reflejar los cambios.
Juan Diego Mejia Maestre
🔄 El Ciclo de Vida de los Datos en Redux
Redux no es solo para React; es una librería agnóstica que gestiona el flujo de datos de forma unidireccional y predecible en cualquier framework (Angular, Vue, etc.).
🎢 El Ciclo de los Datos (Paso a Paso)
💡 Conceptos Clave
🚀 Consejos Pro para tus Notas
📝 Ejemplo Visual
Evento: Click en "Eliminar Post" ↳ Action: { type: 'DELETE_POST', id: 5 } ↳ Reducer: Filtra el array de posts y quita el ID 5. ↳ UI: El post desaparece de la pantalla automáticamente.
Harold Zurita Simon
Redux nos permite manejar el estado de una aplicación de forma predecible y organizada. Veamos el recorrido que sigue la información desde que ocurre una interacción del usuario hasta que la interfaz se actualiza.
El estado describe la condición actual de la aplicación.
Este estado se almacena en un store, que actúa como una única fuente de la verdad.
La UI (interfaz de usuario) se renderiza basándose en este estado.
Cuando ocurre un evento, por ejemplo, un clic de usuario, no se modifica el estado directamente. En su lugar, se dispara una acción (action) que es enviada a un reducer.
El reducer es el encargado de determinar cómo debe cambiar el estado según la acción recibida.
Una vez que el reducer actualiza el estado en el store, la UI se vuelve a renderizar automáticamente para reflejar los cambios.
De forma resumida:
💡 Nota: Redux es una librería agnóstica, es decir, no depende de un framework específico. Aunque es común asociarla con React, también puede integrarse con Angular, Vue u otros entornos.
Moises Hernandez
¿Que diferencia hay entre redux y react-redux y cual debería usar si estoy usando React JS?
Mariangelica Useche
Team PlatziRedux es la librería agnóstica que puedes usar con cualquier otro framework o librería como Vue, Angular, etc. React redux lo que te proporciona es una capa con utilities que puedes usar directamente con react, como por ejemplo los hooks useSelector y useDispatch. Espero haber resuelto tu duda.
Cesar Guevara Cabrera
