• Inicio
  • Iniciar sesión
  • Crear cuenta
  • 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 Terminología 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

Redux define una serie de términos que describen algunos de los elementos y algunas operaciones involucradas en el flujo de información. Veamos cuáles son.

Hablamos del store, como una referencia al state de nuestra aplicación, es decir la información, más los reducers que pueden modificar el state. Es decir que el store es la información, y las funciones para modificar el store.

Cuando queremos comunicar una modificación desde la vista al store, usamos una operación de nombre dispatch. Por lo que también podemos decir que para comunicarnos con el store debemos usar dispatch.

La operación dispatch, recibe y envía un objeto que describe los cambios que queremos hacer, a estos objetos descriptores de cambios los llamamos Actions, o acciones.

La estructura de estas Actions se ve de la siguiente manera

{
  type: “users/signIn”,
  payload: { email: “urielcodigofacilito.com”  }
}

Todos los actions contienen una propiedad type, que identifica el tipo de evento que se realizará. Opcionalmente, pueden incluir una propiedad payload, en caso de que neceisten enviar información para que se realice el cambio. En este ejemplo tenemos una modificación correspondiente al login de un usuario, junto con el usuario que ingresó.

Cuando el store recibe un action para realizar un cambio, envía este objeto a los reducers del store, a las funciones que realizan los cambios. Las funciones reducers, usualmente evalúan la propiedad type de la action, para definir si harán una modificación, o dejarán pasar el cambio. Normalmente, sólo un reducer aplica modificaciones para cada tipo distinto de action que existe.

Los reducers se caracterizan por ser funciones puras, es decir, funciones que no producen efectos secundarios y manejan estructuras inmutables. Esto quiere decir que dentro de un reducer, no puedes hacer peticiones AJAX, usar timers, intervalos, o modificar variables externas al reducer, ya que todas estas operaciones se considera que producen efectos secundarios.

Alternativamente puedes pensar en las funciones puras como funciones que, si son llamadas con los mismos argumentos, siempre producen los mismos resultados. Cuando involucramos valores externos a la función en su operación, no podemos asegurar que la función siempre retorne el mismo resultado, por lo que ya no se consideran funciones puras.

El state en Redux también es inmutable, es decir, no se puede modificar. Para ser actualizado, el state debe ser reemplazado completamente. Internamente React y Redux podrán detectar cuáles han sido los cambios en el nuevo reemplazo, para actualizar la UI.

En términos prácticos podemos decir que aunque los reducers son funciones que modifican el estado, en realidad estas funciones lo reemplazan. De hecho, cualquier cosas que retorna un reducer se usa para sustituir el state.

Es común que en una aplicación grande, el state se subdivida en porciones, delegando a cada división del state, un reducer distinto. A estas divisiones las llamamos slices. En un state como el siguiente:

{
  user: {}
  videos: []
}

Podemos tener una serie de reducers para user, y otro grupo de reducers para videos.

Por último, usualmente escucharás hablar de action creators. Estas son funciones que retornan objetos action, que describen un cambio. Se implementa este concepto, para evitar escribir los objetos action en cada componente, haciendo más fácil que modifiquemos las acciones, y evitando posibles bugs al generar estos objetos de cambio.

¡Y listo! Ahora que ya conocemos cuáles son los conceptos al hablar de Redux, continuemos en la implementación.

  • 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)

Terminología en Redux

arrow_back Siguiente arrow_forward
Curso para crear Single Page Applications con React