- state define UI
- en la UI el usuario dispara una acción
- la acción es mandada al reducer
- el reducer actualiza el store
- el store contiene al state
- volvemos al paso 1
Conceptos claves para empezar
¿Ya tomaste el Curso Básico de Redux?
Conceptos claves de Redux
Ciclo de vida de Redux
Diferencias entre Redux y Context
Introducción a nuestro proyecto
Creemos una Pokedux
Iniciando nuestro proyecto
¡Atraparlos ya!
Introducción a PokeAPI
React.js + Redux
Integrando Redux
Hooks vs. Connect
Redux DevTools
Middlewares
Middlewares
Peticiones asíncronas
Redux Thunk
Middlewares alternativos: Redux Saga
Avanzando la ui
Agreguemos un loader
Agreguemos favoritos
Inmutabilidad
¿Qué es inmutabilidad?
Agregando Inmutabilidad a nuestra Pokedux
Avanzado
Cuándo usar reducers combinados
Redux Toolkit: creando nuestro primer Slice
Redux Toolkit: createAsyncThunk
Despedida del curso
Conclusiones
You don't have access to this class
Keep learning! Join and start boosting your career
Redux is key to state management in JavaScript applications, especially when we talk about data flow. Let's detail this cycle as a piece of data passes through this robust library. The goal is to unravel each stage so you can implement Redux with confidence and precision.
The heart of Redux is state. It describes the current state of your application, hosted in the Store. It is all you need to render the graphical interface (UI) of your application. The UI is always built from this current state.
Every time a user interacts with your application, say through a click, an event is generated. This event triggers an action that causes changes in the state, but in an indirect and controlled way.
These are the steps for the state to be updated:
The reducer is essential, as it defines the logic for updating the state. It does not modify the state directly, but returns a new state based on the action received. It is essential to maintain predictability in UI updates.
A common misconception is to think that Redux only works with React. Although it was designed primarily for this library, Redux is framework agnostic. This means that you can integrate it with any frontend framework, including:
This flexibility allows you to use Redux in a wide variety of projects, giving you consistency in state management, regardless of the base technology.
Implementing Redux may seem complicated at first, but with these practical tips, you can manage it more effectively:
Always remember that constant practice and curiosity are your best allies to master Redux. We encourage you to deepen your knowledge and continue exploring the possibilities that this library can offer you in your projects.
Contributions 6
Questions 1
–
–
Redux es una libreria “agnostica”, es decir, puede ser usada con cualquier capa en la UI o framework.
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.
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.
Want to see more contributions, questions and answers from the community?