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

Últimos detalles

55/57
Recursos

Hemos terminado finalmente con el uso de Redux en nuestro proyecto, aplicando las mejores prácticas y métodos HTTP como GET, POST, PUT y DELETE.

Nos gustaría ver cómo quedó tu proyecto, compártelo en la sección de aportes de la clase para que todos podamos verlo.

Aportes 24

Preguntas 2

Ordenar por:

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

Para buscar dónde tienen puesto algún “console.log” o cualquier otra cosa que quieran buscar, en la terminal pueden usar

git grep "lo que quieran buscar"

Por ejemplo:

git grep "console.log"

Les arrojará en qué archivo tiene exactamente ese texto

![](

  1. Hacemos que el if del componentDidUpdate() del tareas solo se llame cuando sea estrictamente necesario, asi solo cuando le de click a un eliminar se llame el traerTodas() del componentDidUpdate() una sola vez.

  2. Limpiamos los inputs cuando ya se abrió una pestaña para editar y me regreso y quiero agregar una nueva tarea formateo los inputs para que esten vacios y no con info anterior

Conclusión: solo cuando le de click a un eliminar se llame el traerTodas() del componentDidUpdate() una sola vez. Y limpio los inputs cuando lo abro

Un último detalle para corregir es que nuestra aplicacion se renderiza del lado del cliente (Client Side Rendering), por lo tanto en caso de perder la conexión a internet el cliente mantiene parte de la aplicación en su navegador lo que incluye el estado, así que veamos este caso de uso siguiendo la siguiente secuencia:

  1. Estamos ubicados en usuarios y consultamos las publicaciones del primer usuario
  2. Estas se actualizan en el estado de publicaciones
  3. Perdemos la conexión a internet. Esto se puede simular ingresando por inspector de elementos -> network -> Offline
  4. Ahora nos devolvemos a usuarios y vemos que a pesar que no hay conexión podemos visitar el listado de usuarios.
  5. Si volvemos a consultar las publicaciones del primer usuario, el que ya tenemos en el estado nos va a mostrar la información de sus publicaciones porque estan almacenadas en el estado
  6. si volvemos a usuarios y consultamos otro usuario generamos un error porque al hacer el request este falla y nuestro estado error se actualiza con el error
  7. Ahora viene la acción a corregir, si volvemos a consultar las publicaciones del primer usuario deberiamos poder verlas pero como el estado de error tiene almacenado un mensaje, cuando realizamos la validacion no llegamos a la funcion que presenta las publicaciones y nos muestra nuevamente un error.

Para corregirlo lo que hice fue crear una nueva accion en publicacionesActions que limpia el estado de error y la ejecuto en el componentDidMount del componente Publicaciones para asegurarme que antes de solicitar y validar datos este estado este vacio.

publicacionesActions.js

export const limpiarError = () => (dispatch)=>{
  dispatch({
    type: LIMPIAR_ERROR,
  })
}

publicacionesReducer.js

case LIMPIAR_ERROR:
      return{
        ...state,
        error: ''
      }
      

Publicaciones/index.js

async componentDidMount() {
    const {
      usuariosTraerTodos,
      publicacionesTraerPorUsuario,
      match: {
        params: { key },
      },
      limpiarError
    } = this.props;

    if (!this.props.usuariosReducer.usuarios.length) {
      await usuariosTraerTodos();
    }

    if (this.props.usuariosReducer.error) {
      return;
    }

    limpiarError(); // Aquí limpio el estado de error

    if (!('publicaciones_key' in this.props.usuariosReducer.usuarios[key])) {
      await publicacionesTraerPorUsuario(key);
    }
  }
  

Sin tomar en cuenta que el código del profesor requiere un poco mas de orden, el curso estuvo excelente.

Les comparto mi proyecto finalizado
Live
Repository

Tengo un codigo spaguetti :v

Genial y muy completo. A practicar!!!

tienen que verlo a velocidad 1.5x , es otra experiencia jajajajajaja

¿Alguien notó un pequeño detalle del vídeo anterior?:
Cuando se edita o elimina una tarea, habiedo seleccionado previamente varios checkboxs, al completarse la acción de eliminar o editar, naturalmente al borrarse nuevamente las tareas se borran esas referencias de las tareas que estaban chequeadas, sería bueno intentar corregir ese detalle, que permanezcan chequeadas aún eliminando, guardando o editando. lo intentaré a ver que pasa…
Saludos.

Falto modificar el componentDidMount en Save.js. Ya que si recargas en edit no hay tasks o tareas.

async componentDidMount() {
    const {
      match: {
        params: {
          userId,
          taskId
        }
      },
      changeField,
      cleanForm,
      getTasks,
    } = this.props;


    if (!Object.keys(this.props.tasks).length) {
      await getTasks();
    }

    if (userId && taskId) {
      const task = this.props.tasks[userId][taskId];
      changeField('userId', task.userId);
      changeField('title', task.title);
    } else {
      cleanForm();
    }
  }

También se puede reutilizar código y hacer esto:

if (usu_id && tar_id) {
            const tarea = tareas[usu_id][tar_id];
            cambioUsuarioId(tarea.userId);
            cambioTitulo(tarea.title);
} else {
            cambioUsuarioId('');
            cambioTitulo('');
 }

Aprender es duro y este curso no fue la excepción! Excelente.

Muy buen curso muchas gracias.

Muy buen curso 😄

Excelente clase. 🙂

Wow, de verdad es un curso con una dificultad un poco mayor, se necesita prestar bien atención a la temática presentada. Muy bueno.

Muy buen curso muchas gracias.

Muy bueno el curso, y el temario de contenidos

Excelente curso, me gusto mucho, se aprende bastante, es curso con nivel complejo pero colocándole detalle si se puede

simplemente excelente.

Excelente contenido genial curso

Feliz de terminar este proyecto y tener todo en Git 😮
Muchas gracias

export const limpiarForma = () => async (dispatch) => {
	dispatch({
		type: LIMPIAR
	})
}```