Bienvenido al curso

1

Conoce a tu profesor y todo lo que aprenderás sobre Redux

2

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

3

¿Qué es React y cómo funciona?

4

Preparando nuestro entorno de trabajo

5

Creación de la app con React

6

Agregando funciones a la app con React

7

Stateful vs Stateless

8

Ciclo de vida de React

9

Manejando promesas

10

React Router DOM

Introducción a Redux

11

¿Qúe es Redux, cuándo usarlo y por qué?

Fases de Redux

12

Introducción: las fases de Redux

13

Store

14

Reducers

15

Conexión a un componente

16

Action Creators

17

Redux Thunk

18

Explicación teórica: ciclo completo de Redux

19

Práctica: ciclo completo de Redux

Fases Extra

20

Archivos Types

21

Try Catch

22

Escenarios asíncronos

23

Componente Spinner

24

Componente Fatal

25

Tabla como componente

Compartir información en Redux

26

Introducción Compartir información en Redux

27

Parámetros por URL

28

Compartir Reducer

29

Múltiples Reducers

30

Llamando a múltiples reducers en una acción

31

Uso del estado en la acción

32

Evitar segundas búsquedas

33

Inmutabilidad

34

Evitar sobrescritura

35

Validación compuesta

36

Validación de errores

37

Modificando respuesta de url

38

Estado con interacción

39

Mostrar componentes dinámicamente

40

Llamadas asincronas dinámicas

41

Props por herencia vs estado

42

Estado compartido

Métodos HTTP

43

Introducción a métodos HTTP

44

Nuevo ciclo Redux

45

Normalizar datos

46

Mapear Objetos

47

Componente para agregar tarea

48

Manejar inputs con Reducer

49

POST

50

Deshabilitando botón

51

Redireccionar

52

Reutilizar componentes

53

PUT

54

DELETE

55

Últimos detalles

Conclusión

56

Conocimientos adquiridos

57

Qué hacer a continuación

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

Estado compartido

42/57
Recursos

Aportes 23

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

  1. En el componente Comentarios cambiamos los condicionales si com_cargando es true y que no exista ningún comentario muestra el spinner y si hay un error muestra el error.
  2. En el reducer de publicaciones creamos un nuevo caso llamado
    COM_ACTUALIZAR que retorna las publicaciones solo que el
    com_cargando y com_error seteados a false.
  3. En el actions de traerComentarios() al hacer los dispatch los hacemos a los casos de COM_CARGANDO y COM_ACTUALIZAR.

Conclusión: me muestra el loader cuando busca los comentarios de una publicación y error cuando no se pudo completar la petición, todo creando un nuevo caso en el reducer de publicaciones para solo actualizar los comentarios.

Adicional manejo si esa publicacion no tiene comentarios lo manejo y pinto por pantalla

en el vídeo no vi cuando el profesor puso el key={ comentario.id }

pos si tienen un error en la consola es posivle que necesiten agregar la siguiente linea en Comentarios.js

const ponerComentarios = () => (
        props.comentarios.map((comentario) => (
            <li key={comentario.id}>
                <b>
                    <u>
                        {comentario.email}
                    </u>
                </b>
                <br />
                {comentario.body}
            </li>
        ))
    )

Es sensación mía o ha complicado el programa mas de lo que uno haría realmente en producción?

si se envia una propiedad que esta en el reducer pero con parametros,
siempre respetara el del reducer.

Este curso duele hacerlo. Cúando lo actualizan?

Si mandas algo por parámetro y por Reducer, al que hará caso es al Reducer, ya que el Reducer tiene más peso.

Excelente clase. 🙂

solo un detalle, el error y el cargando de los comentarios es general para todos, si falla uno los otros también. Es un reto interesante solucionar eso 😃

Se ignora los parámetros en un componente cuando se envia tambien los mismos parametros por el reducer, el reducer tiene más peso

El módulo estuvo excelente.
Fue pesado porque es el inicio para entender Redux. Es normal que los compañeros y compañeras se sientan perdidos a lo largo del camino. Sin embargo y pasándome lo mismo, lo mejor es volver a hacerlo con mucha calma.
Utilicen console.log para que puedan entender cómo es el flujo de los datos.
Recuerden estar pensando en una arquitectura Flux.
Por otro lado, el profesor tuvo muchos errores en cuanto a nombrar variables, pues hizo perderme varias veces. Lo que decidí hacer fue comenzar de nuevo con nombres de variables que tengan legibilidad y entendimiento.

En mi caso preferí trabajarlo de esta forma , me parece más corta y legible.

import {
  TRAER_POR_USUARIO,
  CARGANDO,
  ERROR,
  COM_CARGANDO,
  COM_ERROR,
} from "../types/publicacionesTypes";

const INITIAL_STATE = {
  publicaciones: [],
  cargando: false,
  error: "",
  com_cargando: false,
  com_error: "",
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case TRAER_POR_USUARIO:
      return {
        ...state,
        publicaciones: action.payload,
        cargando: false,
        error: "",
        com_cargando: false,
        com_error: "",
      };
    case CARGANDO:
      return { ...state, cargando: true };
    case ERROR:
      return { ...state, error: action.payload, cargando: false };
    case COM_CARGANDO:
      return { ...state, com_cargando: true };
    case COM_ERROR:
      return { ...state, com_error: action.payload, com_cargando: false };
    default:
      return state;
  }
};

El reducer es prioritario

excelente

Excelente clase.

Excelente clase!

Excelente clase, y nos hace caer en cuenta de los errores que pueden llegar a ocurrir que no son ni de sintaxis ni de crash de la aplicación, sino de datos erróneos

Tengo un problema muy extraño que descubri de casualidad, me gustaria saber si alguen entiende porque sucede:

case COMENTARIOS_ACTUALIZAR:
	return {
      ...state,
      comentariosState:{
      	...state.comentariosState,
      	loading: false
      }
	}

Como ven cree el caso en el reducer para cuando llega la accion “COMENTARIOS_ACTUALIZAR” Pero si prestan atencion solo cambio el estado de “comentariosState”, no actualizo las publicaciones lo cual agregaria la publicacion actualizada con los comentarios que envio a travez del action.payload y aun asi funcionaba, trayendome todos los comentarios de la publicacion seleccionada. Me parecio raro asi que para probar elimine el payload del action, por lo cual, por mas que yo agrege esa linea que actualiza las publicaciones nunca va a ser capaz de acutualizarse, dejando el dispatch de ‘traerComentarios’ de la siguiente forma:

dispatch({
   type: COMENTARIOS_ACTUALIZAR,
});

Lo raro de todo esto es que la app anda… Mi sospecha es que en algun lado de traerComentarios estoy modificando el state sin darme cuenta, lo malo es que no se donde es… Les dejo una screen de toda mi funcion **traerComentarios **a ver si lo pueden resolver:

Muy bien. Vamos con el siguiente modulo

Por si les interesa hacer la regla css más corta:
.

li {
	margin: 15px 0 15px 0;
}

puede quedar abreviado como:

li {
	margin: 15px 0;
}

Incluso pueden usar hooks en vez de usar connect
https://react-redux.js.org/api/hooks

Excelente clase

programar un arte