Evitar segundas búsquedas

Clase 32 de 57 • Curso de Redux por Bedu

Rulo Code

student•

Tambien se puede hacer desde el reducer.

case GET_FOR_USER :
            return { ...state,
                publications: [ action.payload, ...state.publications ],
                loading: false,
                error: ''
  }

Andrés Felipe Eslava Zuluaga

student•

Excelente ejemplo

Nery Alberto Cano Ortigoza

student•

No me gusto esta sección del curso, me da la sensación de haber dado una vuelta innecesaria que por lo que veo en los comentarios a más de uno nos mareo.

horacio garcia

student•

tienes razón on bro en este punto me perdí di un poco, me parece mucha vuelta para obtener los usuarios pero supongo que se realiza para entender en detalle lo que se esta requirendo por usuario, pero si es enredado.

Gerson Montenegro

student•

Es que de entrada su usamos redux, es porque estamos ante un proyecto grande y escalable, no es para aplicaciones pequeñas. Y si además agregamos una capa middleware para controlar la sincronía, estamos pensando en proyectos con alta demanda de peticiones. En este último caso incluso la cosa pudo volverse más compleja porque hay algo más apropiado llamado Sagas.

Está bien en el curso porque nos prepara para casi que el escenario más común en proyectos reales, sin importar que el proyecto realizado aquí sea uno muy simple.

Willy David Da Conceicao Lozada

student•

El actions creator de traerPorUsuario() veo el estado actual de las publicaciones con getState()
Creo un arreglo que me guarda lo que estaba en las publicaciones del reducer lo despliego aquí y le agrego las publicaciones nuevas y en el dispatch mando como payload este arreglo. Ahora cuando vemos otro usuario se agrega a ese arreglo las publicaciones del otro usuario.
Por ultimo evitamos que busque la info del usuario en el componente usuarios/index.js colocando un condicional que dice si no hay ningun usuarios traelos y si existen no hagas nada

Conclusión: guardamos las publicaciones de usuarios vistos anteriormente y en el componente usuarios/index.js evito que se vuelva a llamar los usuarios porque ya existen si no existen si los llama y los muestra en la tabla.

Johan García Trejo

student•

Que buen resumen

Willy David Da Conceicao Lozada

student•

Gracias amigo! los hago y para no quedármelos los comparto xD

Valentina Fernández Rada

student•

Manejo la iteración de usuarios por id, no por key. No hace segunda petición desde el action (no lo controlo desde componente para que pueda actualizar el estado correctamente)

export const getPostsByUser = id => async (dispatch, getState) => {
  // Obtenemos los posts actuales para que no se tengan que volver a cargar
  const { posts: currentPosts } = getState().postsReducer;
  const existsPosts = currentPosts.filter(p => id == p.userId);

  // Si ya existen posts de ese usuario no se vuelven a obtener
  if (!existsPosts.length) {
    dispatch({
      type: postsTypes.POSTS_LOADING
    });

    try {
      const response = await httpClient.get(`posts?userId=${id}`, {});
      // Se fusionan todos los posts actuales con los nuevos
      const updatedPosts = [
        ...currentPosts,
        {
          userId: id,
          posts: response
        }
      ];
      // El dispatch accionará la modificación de estado al userReducer
      dispatch({
        type: postsTypes.GET_POSTS_BY_USER,
        payload: updatedPosts
      });
    } catch (error) {
      dispatch({
        type: postsTypes.POSTS_ERROR,
        payload: error
      });
    }
  }

Andrés Felipe Eslava Zuluaga

student•

Gracias!

Luis Eduardo Rodríguez Ramírez

student•

Me diste una buena idea! Yo actualicé los post sólo si el usuario buscado no se encuentra de la siguiente manera:

// Verificar que los post ya traidos del usuario actual y no volver a buscar si ya existen
	const usuario_id = usuarios[key].id;
	const existPosts = currentPost.filter( p => usuario_id == p.userId );
	let respuesta = {data: []}
	if (!existPosts.length) {
		respuesta = await axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${usuario_id}`);
	}
	const publicacionesActualizadas = [...currentPost].concat(respuesta.data);

Así, comparas los id del usuario a buscar y con los id ya existentes

Oscar Miguel Fabian Bernal

student•

entiendo el ejercicio, pero no estan evitando hacer segundas busquedas, lo que se hace es llenar un arreglo con los posts de cada usuario. Yo esperaba que se filtrara cuando ya se busco un usuario en particular para no hacer esta busqueda pero no se realiza el final del video. Quizas la ultima parte del video se refiere a evitar segundas busquedas, pero fue mas bien como evitar volver a traer la data, lo cual ya se habia explicado en un video anterior.

Alejandro Maimus

student•

Spoiler alert

José Gregorio Estrada Meneses

student•

Gente animo si no entienden vuelvan a la clase 24 y hagan un mapa de todo lo que sucede, esto es un ejemplo real. tu puedes solo intentalo.

Enrique Devars

teacher•

Hola, hice un action que evita realizar segundas busquedas, si tienen alguna sugerencia sobre el código me encantaría escucharla 🙌


export const getPostsByUser = id => async (dispatch, getState) => {
  const { publicaciones } = getState().publicacionesReducer;

  dispatch({
    type: CARGANDO
  });

  try {
    const existsPosts = publicaciones.filter(usuario => usuario.userId === id);

    if (!existsPosts.length) {
      const response = await axios.get(
        `https://jsonplaceholder.typicode.com/posts?userId=${id}`
      );

      const publicacionesActualizadas = [
        ...publicaciones,
        { userId: id, posts: response.data }
      ];
      dispatch({
        type: TRAER_POSTS_POR_USUARIO,
        payload: publicacionesActualizadas
      });
    }
  } catch (error) {
    console.error("Error", error.message);
    dispatch({
      type: ERROR,
      payload: error.message
    });
  }
};

Alexis Steven Valderrama

student•

wow me perdi, porque es necesario tener las publicacliones anteriores del usuario es decir, poruq es necesario tener las de el usurio 1 cuando hago fetch al usuarios 9?

Andrés Felipe Eslava Zuluaga

student•

Porque si desde users entras al user 3, te devuelves a users, ahora seleccionas user 7, las publicaciones que se leccionaste se sobreescriben. Por ejemplo, si necesitas ahorrarte de memoria: ir a consultar cada vez que entres a un user y tenerlo en el estado, lo puedes memoizar y así no volver a ejecutar la misma consulta n veces Es un comportamiento que no quieres, por ejemplo, si quizás ocurre algún error de navegación entre ir de un user a otro. Puedes tener un rastro de cómo se va armando tu objeto y pillarte el error

Eddson Blanco

student•

NECESITO AYUDA NO PUEDO SALIR DE ESE ERROR!!!!

Eddson Blanco

student•

import axios from 'axios';
import { GET_ALL_BY_USER,} from '../types/postsType'


export const getByUser = (key) => async (dispatch, getState) =>{
    const { users } = getState().usersReducers;
    const { posts } = getState().postsReducers;
    const user_id = users[key].id;
    const response = await axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${user_id}`);

    const newdata = [ 
        ...posts,
        response.data
     ]
//     const updated_posts = [{
//         ...posts,
//         newdata
// }];

    dispatch({
        type: GET_ALL_BY_USER,
        payload: newdata
    })

}```

Eddson Blanco

student•

Gabriel Parrello

student•

Hola que tal? queria saber si evitar las segundas búsquedas directamente desde el reducer sería una buena práctica. Lo hice de esa manera y me funcionó. Me pareció simple y me gustó implementarlo así pero no se si será una practica correcta desde la teoría.

Desde ya muchas gracias, estoy aprendiendo muchísimo en este curso!

import types from '../types';

const INITIAL_STATE = {
    list: [],
    loading: false,
    error: ''
}

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case types.posts.POSTS_LIST_LOAD_SUCCESS:
            return {
                ...state,
                list: action.payload,
                loading: false,
                error: ''
            }

        case types.posts.POSTS_LIST_BY_USER_LOAD_SUCCESS:
            return {
                ...state,
                list: [...state.list, ...action.payload],    // <----- Aquí evito segundas búsquedas
                loading: false,
                error: ''
            }

        default: return state;
    }
}

Michael Torres Morán

student•

Inicialmente no debería haber ningún tipo de problema al momento de realizar esto, pero el fin de los reducers.js es cumplir con la tarea de asignaciones. Todo lo que corresponda a lógica como tal debería de ir en los actions.js

Andrés Felipe Eslava Zuluaga

student•

Considero que está bien, pues la finalidad del reducer es recibir la información (payload) y devolver dicha información en forma de estado actualizado y únicamente debería hacer esto. · La lógica la lleva el action y reducer recibe la info

Cristian Blandon

student•

Las acciones no deberían usar ni tocar el estado actual... Todo eso se debería hacer en los reducers.

Matias borrazas

student•

Me queda la duda, de que si tenes muchos usuarios y vas a tener todas las publicaciones siempre cargadas. A 1000 usuarios (viendo un caso grande) vas a estar llenando la memoria con publicaciones que seguramente si ya viste un usuario no vuelvas a entrar a mirarlo.

Juan Castro

teacher•

En aplicaciones así de grandes vale la pena consular los datos de tu API cada vez que los necesitas. Necesitas los últimos 10 usuarios en entrar, los buscas. Necesitas la info detallada de 1 usuario, la consultas.

Estos puede optimizarse incluso más que con una API REST si usamos GraphQL: https://platzi.com/clases/graphql/.

Andres Roberto Coello Goyes

student•

export const traerPorUsuario = (key) => async (dispatch, getState) => {
    const { usuarios } = getState().usuariosReducer;
    const { publicaciones } = getState().publicacionesReducers;

    const user_id = usuarios[key].id;
    const respuesta = await axios.get(`http://jsonplaceholder.typicode.com/posts?userId=${user_id}`);

    const publicaciones_actualizadas = [
        ...publicaciones,
        respuesta.data
    ];

    dispatch({
        type: TRAER_POR_USUARIOS,
        payload: publicaciones_actualizadas
    })

}

Cristian Iñiguez

student•

En este caso estamos usando una API pública cuyos datos no cambian, por lo que aquí es recomendable no pedir los usuarios dos veces. Pero si usamos una API cuyos datos van cambiando constantemente, entonces creo que la petición debería realizarse siempre que accedamos a la página de usuarios y no solo una vez para que el cliente este siempre actualizado.

Oyarzabal Ivan

student•

Lo que dices tiene sentido, pero eso haria la pagina mas pesada y si hablamos de una app seria ineficiente, mira instagram por ejemplo, cuando entras te muestra 10 publicaciones, sigues bajando y te muestra otras 10, pero siempre son publicaciones que ocurrieron antes de que entraras a instagram, cuando actualizas el feed ahi recien te muestra publicaciones nuevas. Pero bueno, en cada caso es diferente y cada app tiene sus propias necesidades.

Aitor Santana Cabrera

student•

Creo que algunas partes del curso son un poco relleno. O pertenecen a otros curso, de React en sí por ejemplo

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂

Betsabet Geraldine Rojas Medina

student•

Hay alguna forma de traer usuarios sin necesidad de realizar la funcion usuariosTraerTodos() porque se supone que ya esta cargada a un state?

Jair Sebastian Lozano Moron

student•

Tengo un problema y no enceuntro error en el codigo, al menos hasta donde yo entiendo. Cuando entro a una publicacion me sale:

Unhandled Rejection (TypeError): undefined is not iterable (cannot read property Symbol(Symbol.iterator)) (anonymous function) C:/Users/Jair.Lozano/Documents/programacion/JavaScript/redux/blog_platzi/src/actions/publicacionesActions.js:16 13 | const respuesta = await axios.get( 14 | https://jsonplaceholder.typicode.com/posts?userId=${usuario_id} 15 | );

16 | const publicaciones_actualizadas = [...publicaciones, respuesta.data]; | ^ 17 | 18 | dispatch({ 19 | type: TRAER_POR_USUARIO, View compiled

Rodolfo Saldivar

teacher•

Podrías poner todo el método del código por favor.

Eddson Blanco

student•

TENGO ESTE MISMO PROBLEMA PUSE TODO EL CODIGO ARRIBA @RODOLFOSALDIVAR

Andrés Felipe Eslava Zuluaga

student•

Evitar segundas busquedas nos ayuda a no sobrecargar el navegador, pero también nos da un orden de cada cosa que estamos necesitando, cuando debemos hacer un trackeo de datos.

Alejandro Mejia Escobar

student•

No sé si el profe lo identifica más adelante, pero el array de publicaciones se está alimentando incluso con publicaciones que ya había consultado

export const getPostsByUser = id => async (dispatch, getState) => {
  // Obtenemos los posts actuales para que no se tengan que volver a cargar
  const { posts: currentPosts } = getState().postsReducer;
  const existsPosts = currentPosts.filter(p => id == p.userId);

  // Si ya existen posts de ese usuario no se vuelven a obtener
  if (!existsPosts.length) {
    dispatch({
      type: postsTypes.POSTS_LOADING
    });

    try {
      const response = await httpClient.get(`posts?userId=${id}`, {});
      // Se fusionan todos los posts actuales con los nuevos
      const updatedPosts = [
        ...currentPosts,
        {
          userId: id,
          posts: response
        }
      ];
      // El dispatch accionará la modificación de estado al userReducer
      dispatch({
        type: postsTypes.GET_POSTS_BY_USER,
        payload: updatedPosts
      });
    } catch (error) {
      dispatch({
        type: postsTypes.POSTS_ERROR,
        payload: error
      });
    }
  }

// Verificar que los post ya traidos del usuario actual y no volver a buscar si ya existen
	const usuario_id = usuarios[key].id;
	const existPosts = currentPost.filter( p => usuario_id == p.userId );
	let respuesta = {data: []}
	if (!existPosts.length) {
		respuesta = await axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${usuario_id}`);
	}
	const publicacionesActualizadas = [...currentPost].concat(respuesta.data);

export const getPostsByUser = id => async (dispatch, getState) => {
  const { publicaciones } = getState().publicacionesReducer;

  dispatch({
    type: CARGANDO
  });

  try {
    const existsPosts = publicaciones.filter(usuario => usuario.userId === id);

    if (!existsPosts.length) {
      const response = await axios.get(
        `https://jsonplaceholder.typicode.com/posts?userId=${id}`
      );

      const publicacionesActualizadas = [
        ...publicaciones,
        { userId: id, posts: response.data }
      ];
      dispatch({
        type: TRAER_POSTS_POR_USUARIO,
        payload: publicacionesActualizadas
      });
    }
  } catch (error) {
    console.error("Error", error.message);
    dispatch({
      type: ERROR,
      payload: error.message
    });
  }
};

import axios from 'axios';
import { GET_ALL_BY_USER,} from '../types/postsType'


export const getByUser = (key) => async (dispatch, getState) =>{
    const { users } = getState().usersReducers;
    const { posts } = getState().postsReducers;
    const user_id = users[key].id;
    const response = await axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${user_id}`);

    const newdata = [ 
        ...posts,
        response.data
     ]
//     const updated_posts = [{
//         ...posts,
//         newdata
// }];

    dispatch({
        type: GET_ALL_BY_USER,
        payload: newdata
    })

}```

import types from '../types';

const INITIAL_STATE = {
    list: [],
    loading: false,
    error: ''
}

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case types.posts.POSTS_LIST_LOAD_SUCCESS:
            return {
                ...state,
                list: action.payload,
                loading: false,
                error: ''
            }

        case types.posts.POSTS_LIST_BY_USER_LOAD_SUCCESS:
            return {
                ...state,
                list: [...state.list, ...action.payload],    // <----- Aquí evito segundas búsquedas
                loading: false,
                error: ''
            }

        default: return state;
    }
}

export const traerPorUsuario = (key) => async (dispatch, getState) => {
    const { usuarios } = getState().usuariosReducer;
    const { publicaciones } = getState().publicacionesReducers;

    const user_id = usuarios[key].id;
    const respuesta = await axios.get(`http://jsonplaceholder.typicode.com/posts?userId=${user_id}`);

    const publicaciones_actualizadas = [
        ...publicaciones,
        respuesta.data
    ];

    dispatch({
        type: TRAER_POR_USUARIOS,
        payload: publicaciones_actualizadas
    })

}

Evitar segundas búsquedas

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