Últimos detalles

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

¿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

Proyecto final https://reactjs-redux-blog.web.app

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