Últimos detalles

Clase 55 de 57 • Curso de Redux por Bedu

Contenido del curso

Bienvenido al curso

Repaso React

Introducción a Redux

11
¿Qúe es Redux, cuándo usarlo y por qué?
00:15 min

Fases de Redux

Fases Extra

Compartir información en Redux

Métodos HTTP

Conclusión

Tomar examen

Resumen

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.

Comentarios

Luis Lira

student•

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

Manuel Rivera

student•

Lo puedes hacer también en tu editor de código, en vsCode es con shift + ctrl + f

Miguel Angel Reyes Moreno

student•

Yo uso mucho ctrl + shift + f para encontrar cualquier detalle que se me esté pasando jaja, es muy útil

Valentina Fernández Rada

student•

![](

)

Grace Nikole Avarado

student•

Está muy bonito :3

Willy David Da Conceicao Lozada

student•

home run super

Willy David Da Conceicao Lozada

student•

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.
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

Axlin Miranda

student•

Excelente tus resumen, en cada clases del curso al final la leía.

horacio garcia

student•

gracias por tus comentarios brother, siempre buscaba donde estaban los tuyos hahah

Iván Darío Sánchez Jiménez

student•

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:

Estamos ubicados en usuarios y consultamos las publicaciones del primer usuario
Estas se actualizan en el estado de publicaciones
Perdemos la conexión a internet. Esto se puede simular ingresando por inspector de elementos -> network -> Offline
Ahora nos devolvemos a usuarios y vemos que a pesar que no hay conexión podemos visitar el listado de usuarios.
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
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
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 = () =&gt; (dispatch)=&gt;{
  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);
    }
  }

Jhean Pacheco

student•

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

Frank Antonio Piñin Ato

student•

Tengo un codigo spaguetti :v

Juan Rouger

student•

Tengo mi cerebro en modo spaguetti :v

Daniel Abanto

student•

Genial y muy completo. A practicar!!!

Daniel Cutipa

student•

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

Usuario anónimo

user•

¿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.

Abdiel Ortega

student•

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();
    }
  }

omar leonardo barreto palacios

student•

hola compañero puedes compartir el getTask en mi caso traigo a traerTodas pero no me funciona.

Gracias

Abdiel Ortega

student•

Te comparto mi repo @omarb.

https://github.com/abdielDev/my_blog/blob/master/src/actions/tasksActions.js

David Chinchin

student•

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('');
 }

Wilmer David Cedeño Mendoza

student•

A mi se me ocurrió la misma idea, pero creo que lo hace porque el objetivo del curso es familiarizarse con el uso de Redux

Willy David Da Conceicao Lozada

student•

Lo tenia todo bien y de un momento a otro este error y es para todas las peticiones...

Access to XMLHttpRequest at 'https://jsonplaceholder.typicode.com/todos/1' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Abraham Sanchez

student•

Esto pasa por el lado del backend, es posible que hayas superado las peticiones de prueba gratis que da jsonplaceholder y ahora ha bloqueado tu ip para que no puedas hacer mas peticiones.

Andrés Felipe Eslava Zuluaga

student•

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

Jorge Alexander Salcedo Alvarez

student•

Muy buen curso muchas gracias.

Juan Felipe Salamanca Gonzalez

student•

Muy buen curso :D

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂

Johan Mosquera

student•

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.

Johan García Trejo

student•

Muy buen curso muchas gracias.

Daniel

student•

Muy bueno el curso, y el temario de contenidos

Axlin Miranda

student•

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

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);
    }
  }
  

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();
    }
  }

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

Últimos detalles

Bienvenido al curso

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

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React

Agregando funciones a la app con React

Stateful vs Stateless

Ciclo de vida de React

Manejando promesas

React Router DOM

Introducción a Redux

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

Fases de Redux

Introducción: las fases de Redux

Store

Reducers

Conexión a un componente

Action Creators

Redux Thunk

Explicación teórica: ciclo completo de Redux

Práctica: ciclo completo de Redux

Fases Extra

Archivos Types

Try Catch

Escenarios asíncronos

Componente Spinner

Componente Fatal

Tabla como componente

Compartir información en Redux

Introducción Compartir información en Redux

Parámetros por URL

Compartir Reducer

Múltiples Reducers

Llamando a múltiples reducers en una acción

Uso del estado en la acción

Evitar segundas búsquedas

Inmutabilidad

Evitar sobrescritura

Validación compuesta

Validación de errores

Modificando respuesta de url

Estado con interacción

Mostrar componentes dinámicamente

Llamadas asincronas dinámicas

Props por herencia vs estado

Estado compartido

Métodos HTTP

Introducción a métodos HTTP

Nuevo ciclo Redux

Normalizar datos

Mapear Objetos

Componente para agregar tarea

Manejar inputs con Reducer

POST

Deshabilitando botón

Redireccionar

Reutilizar componentes

PUT

DELETE

Últimos detalles

Conclusión

Conocimientos adquiridos

Qué hacer a continuación