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

Evitar segundas búsquedas

32/57
Recursos

Aportes 20

Preguntas 6

Ordenar por:

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

Tambien se puede hacer desde el reducer.

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

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.

  1. El actions creator de traerPorUsuario() veo el estado actual de las publicaciones con getState()

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

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

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.

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

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

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

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.

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

}

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.

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.

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

Excelente clase. 🙂

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.

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

Perfectamente podría realizar esto el case que atiende esa acción en el reducer, y como dijo Oscar no se están evitando segundas búsquedas.

Excelente muy bueno

capo, muy bueno

Si, hay partes que comienza a ser confusas, y da impresión que uno debe tener un conocimiento basto como para poder entender. También a veces el profesor no nombra el archivo el cual edita, ya que son similares. En esas partes me equivoco. Toca ver de nuevo la clase, lo único compañeros.

Estás partes del curso se están poniendo confusas, toca repasar.
Me alegra saber que no soy el único con problemas para entender estos temas.