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

Validación de errores

36/57
Recursos

Aportes 13

Preguntas 3

Ordenar por:

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

Cuando requieran simular latencia en su navegador para observar los Spinner por ejemplo, pueden ir al inspector de elementos, network y cambiar en la lista desplegable donde indica online por una red mas lenta como Slow 3G

Excelente clase. Aunque normalmente no he visto dos spinners en una sola página. 🙂

A alguien mas le sale un error cuando regresas a usuarios y le das click en ver.
pero luego refrescas la pestana y sale normal?

  1. En el publicaciones actions hacemos primero un dispatch de cargando a publicacionesReducers, después intentamos traer las publicaciones del usuario en caso de éxito, hace dos dispatchs uno a publicacionesReducers mandándole el arreglo con las publicaciones del usuario que se están viendo y después hacemos el proximo dispatch al usuarioReducers diciendole en esta casilla están tus publicaciones,

  2. En caso de error un dispatch a publicacionesReducers mandando un String con el error}

Conclusión: a las publicacionesActions las validamos con un try catch para manejar los estados de una petición HTTP haciendo dispachts depende la situación.

yo no hice feeling con el proyecto y me esta costando un mundo prestarle atencion… el curso anterior me parecio mas interesante el proyecto. Creo que practicare con otro proyecto

No entiendo bien el por que, asumo que es porque el dispatch está antes
de que declaremos el publicaciones_key y el usuarios_actializados. Pero la aplicación daba error al buscar el “Detalle” de una persona o sus publicaciones y luego ir a usuarios y hacer lo mismo 🤷‍♂️

Me sale el error TypeError: Cannot read property ‘map’ of undefined

const { publicaciones_key } = usuarios[key]

        return publicaciones[publicaciones_key].map((publicacion) => (
            <div 
                className="pub_titulo"
                key={ publicacion.id }

No es muy buena práctica que se vean dos spinners. Pero creo que el ejemplo acá está dirigido a demostrar que la información está completamente a parte: cuando se trae el usuario y las publicaciones a parte.
·
Este curso es confuso, pero vale la pena desde el punto de vista de cómo se aplican todos los conceptos.
Recordemos que Redux son solo unas cuántas funciones, el resto, es un patrón de JS aplicado. Por eso se vuelve difícil

Super, vamos avanzando

Debe ser confuso para el usuario final ver 2 cargandos, considero que con uno para esa vista es suficiente, además, los mensajes de errores deberían ser generales para el usuario final como ‘Sucedió algo inesperado.Inténtelo más tarde’ en el Dom y detallados para el desarrollador como ‘404 error users no found’ en consola.

Muy buena clase, se ve muy dinámico el programa

Debe ser confuso para el usuario final ver 2 cargandos, considero que con uno para esa vista es suficiente

considero que esta es una mejor forma de poner las validaciones

ponerPublicaciones = () => {
        const {
            usuarioReducer,
            publicacionReducer,
            publicacionReducer: { publicaciones },
            match: {
                params: { key },
            },
        } = this.props;

        if (publicacionReducer.error || usuarioReducer.error) {
            return <Fatal mesaje={publicacionReducer.error} />;
        }

        if (!publicaciones.hasOwnProperty(key) || publicacionReducer.cargando) {
            return <Spinner />;
        }

        return publicaciones[key].map((publicacion) => (
            <div className="pub_titulo" key={publicacion.id}>
                <h2>{publicacion.title}</h2>
                <p>{publicacion.body}</p>
            </div>
        ));
    };