• Inicio
  • Iniciar sesión
  • Crear cuenta
  • Explorar cursos
  • Bootcamps
  • Precios
  • Blog

¡Califica el Curso para crear Single Page Applications con React!

Selecciona la calificación de 1 a 5 estrellas

Reporta un error

Curso Curso para crear Single Page Applications con React

Video Flujo de cambios en Redux

Tipo de error

Algo salió mal al cargar el vídeo

El vídeo no pudo cargarse, hemos enviado un reporte al equipo de desarrollo, para poder solucionarlo a la brevedad.

Mientras solucionamos el problema, intenta lo siguiente para solucionar el error:

  • Recarga la página
  • Intenta reiniciar tu navegador y luego vuelve a reproducir el vídeo
  • Vacía el caché de tu navegador
  • Intenta reproducir con las extensiones del navegador deshabilitadas
  • Intenta con un navegador distinto
  • Si el problema persiste contáctanos en Discord
home Ir al inicio report_problem Reportar falla star Valorar curso

View post on imgur.com

Imagen vía: https://redux.js.org/tutorials/essentials/part-1-overview-concepts

Redux propone un esquema para el flujo de información como el que se muestra en pantalla. Veamos poco a poco cómo van pasando los cambios.

La información se encuentra almacenada en el State, esta información se comparte directamente con la interfaz, para que nuestros componentes puedan usarla y mostrarla al usuario.

Cuando el usuario, mientras interactúa con la vista, produce una modificación al state, el state anuncia este cambio al almacén a través de una operación a la que en Redux, se conoce como dispatch. Para anunciar el cambio, se envía un objeto que describe el cambio que queremos hacer, ejemplo: Agregar 10 a mi cuenta de banco.

Una vez que esta solicitud de cambio llega al almacén, Redux hace pasar esta solicitud a través de lo que se conocen como reducers. Mismas que podemos percibir como funciones que modifican el estado.

Cada reducer es una función distinta, diseñada para responder a cierto cambio. Por ejemplo, habrá un reducer para agregar 10 a mi cuenta, y uno distinto para substraer 10 a mi cuenta.

Los reducers alteran al estado, y cuando esto sucede, el estado lo comunica a la vista para que la interfaz se actualice.

De este diagrama podemos concluir algunas cosas importantes que nos ayudarán entender Redux. Aunque redux almacena la información y la comparte con todos, la vista no puede modificar directamente esta información, sólo puede leerla.

Los reducers, son funciones que modifican el state, cualquier modificación al state debe hacerse única y exclusivamente en un reducer.

Para comunicar un cambio a los reducers, se usan objetos a los que llamamos Actions, que describen el cambio a realizar. Estos objetos se envían al store a través de un proceso de nombre dispatch.

Usualmente un reducer está diseñado para responder a cierto tipo de Actions, cuando el Action enviado, corresponde a un reducer, se produce un cambio en el state.

Continuemos.

  • check_circle_outline
    Módulo 1 | 6 clases

    Introducción

    expand_more
  • check_circle_outline
    Módulo 2 | 8 clases

    Routing en el cliente

    expand_more
  • check_circle_outline
    Módulo 3 | 13 clases

    Autenticación de usuarios

    expand_more
    • done_all

      Clase 1

      Qué es Redux

    • done_all

      Clase 2

      Flujo de cambios en Redux

    • done_all

      Clase 3

      Terminología en Redux

    • done_all

      Clase 4

      Instalar y configurar redux

    • done_all

      Clase 5

      Redux devtools

    • done_all

      Clase 6

      Mocking de autenticación

    • done_all

      Clase 7

      createSlice explicado

    • done_all

      Clase 8

      Redux thunks

    • done_all

      Clase 9

      Registro de usuarios

    • done_all

      Clase 10

      Inicio de sesión

    • done_all

      Clase 11

      Cerrar sesión

    • done_all

      Clase 12

      Persistencia de datos

    • done_all

      Clase 13

      Whitelist y blacklist redux-persist

  • check_circle_outline
    Módulo 4 | 10 clases

    Consumir servicios web

    expand_more
  • check_circle_outline
    Módulo 5 | 19 clases

    Styled components

    expand_more
  • check_circle_outline
    Módulo 6 | 7 clases

    Scroll infinito

    expand_more
  • check_circle_outline
    Módulo 7 | 4 clases

    Deploy a producción

    expand_more
  • check_circle_outline
    Módulo 8.-

    Examen del curso

    expand_more
    • done_all

      Examen

      Examen final del curso

0 comentario(s)

Flujo de cambios en Redux

arrow_back Siguiente arrow_forward
Curso para crear Single Page Applications con React