Uso del estado en la acción

Clase 31 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

Comentarios

Luis Lira

student•

A algunos les parecerá algo confuso o demasiado código para hacer algo tan simple que se puede arreglar pasando el id desde el Link y haciendo el fetch con ese valor. ' El motivo de esta clase fue mostrar que podemos usar el estado actual de la aplicación desde un action. ' Recuerden que Redux está pensado para aplicaciones grandes o que desde el inicio su plan es escalar muchísimo, es por eso que en un proyecto pequeño parece demasiado lío. ' Yo entiendo que esto nos servirá cuando estamos haciendo todo de manera modular. Nos evita tener que pasar todas las props de componente a componente, por lo que, entre más crezca el proyecto, el código será más fácil de mantener.

Rodolfo Saldivar

teacher•

Sabiduría PURA

Luis Eduardo Figueroa

student•

muy confuso!!!

Jorge De Jesus Tejeda Bello

student•

A primera vista si se ve un complejo, pero después que haces un mapa y lo repites una y otra vez, veras que se va volviendo cada vez mas sencillo.

Willy David Da Conceicao Lozada

student•

Creamos un nuevo action creator traerPorUsuario() que recibe por parámetro la key (es el índice del ítem del arreglo)
Hacemos que primero llame el actions creator de usuariosTraerTodos() con un await y luego que llame el action de traerPorUsuario(MANDAMOS_KEY) y le mandamos por parámetro la key (es el índice del ítem del arreglo)
Este actions creator traerPorUsuario() accede a todos los usuarios con getState(), y del usuario que llego saca el id, realiza la petición trae todas las publicaciones de este usuario y hace el dispatch de tipo TRAER_TODOS

Y ya tenemos las publicaciones de ese usuario en especifico

Valentino Manrrique

student•

te quiero willy

Willy David Da Conceicao Lozada

student•

jeje. que bien que te hayan servido mis apuntes @drbin 👍

Manuel Andrade

student•

Por que al profesor le arroja 4 resultados y a mi me arroja 5 ?

Andrés Felipe Eslava Zuluaga

student•

Porque seguramente estás usando un nombre de acción similar para traer usuarios, publicaciones o publicaciones por usuario. · Realmente el nombre de los types importa mucho, sino, el dispatch va a ejecutar la última acción con ese nombre. · En mi caso, decidí hacer esto por ahora:

// publicationsTypes.js

export const GET_PUBLICATIONS = 'get_all_publications';
export const LOADING_PUBLICATIONS = 'loading_publications';
export const ERROR_PUBLICATIONS = 'error_publications';

// usersTypes.js

export const GET_USERS = 'get_all_users';
export const LOADING_USERS = 'loading_users';
export const ERROR_USERS = 'error_users';

Oscar Miguel Fabian Bernal

student•

Como sugerencia, mejor dicten las clases con hooks, tremendas referencias que estan saliendo… this.props.match.params.key, que es es parametro de un this.props.blablabla

Ricardo Medina

student•

Puedes hacer algo como esto:

async componentDidMount() {
    const { users, match: { params: { key } } } = this.props
    if (!users.length) {
      await this.props.getAllUsers()
    }
    await this.props.getPublicationsByUser(key)
  }

y tomar como reto al finalizar el curso, hacer lo mismo con hooks. Eso hare yo..

Saludos

Camilo Alexander Velandia Velandia

student•

asi quedaria con useEffect

 useEffect(() => {
    if (!props.usuariosReducer.usuarios.length){
      console.log('dsfs');
      (async => props.usuariosTraerTodos())(); 
    }
    props.publicacionesTraerPorUsuario(props.match.params.key);
  }, [])

José Hugo Calderón Villanueva

student•

¿Como realizaría un acción que consume un servicio donde le envió como parámetro un filtro, es decir si filtro=1 me devuelve una lista de data y si filtro=2 me devuelve otra lista de data, pero la ideas es tener ambas lista en el front.?

Ivan Santiago

student•

Creo que te refieres a algo como un sistema tipo "ver más..." y que te aparezcan más opciones. 🤔 . Puedes solucionarlo haciendo que el total de "opciones" sea un array, y cada vez que se da click en el botón de "ver más..." se haga de nuevo la petición y entonces los resultados de ese get se concatenarían al final de ese array. . Algo parecido a esto:

const productos = [] //Array vacío

//Se hace la primera petición get a la página 1 y se agregan al array

productos = productos.concat(response.data)

//Después el usuario pide ver más, se hace una petición get a la página 2 y se agregan al final del array

Ivan Santiago

student•

O si te referías a simplemente tener todas las páginas en una sola lista puedes simplemente hacer un bucle for que haga peticiones a todas las páginas y concatene la data al final del array . Algo así:

/*Imagina que las páginas empiezan en la 1 y sólo quieres las primeras 10*/
/* Imaginando también que estamos usando axios, como en el curso*/

let publicaciones = []

for(let i = 1; i < 10; i++) {
	const response = await axios.get(`https://api.com/publicaciones?page=${i}`)

	publicaciones = publicaciones.concat(response.data)
}

/*Al final tendrías tu array con las 10 páginas*/

Cristian Andres Ladino Peña

student•

Excelente clase. Gracias a algo que vi en esta clase entendí perfectamente lo que significa async await, antes no lo entendía muy bien jaja. Es como desbloquear una tubería que no dejaba pasar el agua. 🙂

Alex Abel Lerman

student•

No solo la clase... el curso en sí esta demasiado bien explicado.

Diego Ivan Padilla Bernal

student•

¿Por qué hacerlo confuso? a mi parecer hasta el momento no es necesario obtener todos los usuarios y en la ruta se pudo poner el id del usuario y no la key y así hacerlo más directo

jean pierre gabriel nieto acosta

student•

Esta clase me pareció super util

Rafael Soriano Ramírez

student•

Excelente, bastante bien administrado el uso de la información

Brayan Mateo Montañez Baron

student•

No me confunde de esta manera. Además, el mismo nombre del capítulo especifica la razón de hacerlo así

Frank Antonio Piñin Ato

student•

Una pregunta puedp usar el mismo nombre de la carpeta en ves de INDEX.JS Por ejemplo en la carpeta reducers hay un INDEX.JS pero podria ponerle de nombre reducers.js ?

Manuel Rivera

student•

Si claro bro , puedes ponerle el nombre que desees, pero por lo general se le pone como nombre index a los archivos que tienen información principal y en este caso es el encargado de combinar los reducers

Andrés Felipe Eslava Zuluaga

student•

Sí claro, por ejemplo mira cómo tengo organizado:

Johan Mosquera

student•

Buen día.

Se me presenta un problema al cargar los datos, aparecen los mismos en el objeto usuariosReducer y en el objeto publicacionesReducer

He revisado el código y parece estar bien, al menos el INITIAL_STATE tiene la propiedad usuarios en usuariosReducer y publicaciones en publicacionesReducer

Solimar Huayhua Málaga

student•

Podrías poner el link de tu repo para ver tu código

Johan Mosquera

student•

Hola @solics, este es mi repositorio Blog React Redux. El problema era que en el index.js de los reducers, estaba importando el mismo. Por eso los datos generador eran iguales. Gracias por la ayuda de igual forma.

Manuel Rivera

student•

También podríamos pasarle el Id en vez de pasarle el index que sacamos de el método map, con eso solamente lo enviamos con el porps match y lo obtenemos reemplazando de una vez con el id en la URL.

Mario Alejandro Cortez Salinas

student•

Como se podría implementar la parte del Async await del reducer usuariosTraerTodos con React Hooks

Sergio Alejandro Trejo Cuxim

student•

Lo verás más adelante en el curso, una combinación entre Thunks y HTTP

Camilo Alexander Velandia Velandia

student•

 useEffect(() => {
    if (!props.usuariosReducer.usuarios.length){
      console.log('dsfs');
      (async => props.usuariosTraerTodos())(); 
    }
    props.publicacionesTraerPorUsuario(props.match.params.key);
  }, [])

Eduardo Romero

student•

Con respecto a eso de .id, a que hace referencia, revise un poco lo que nos devuelve el API, pero no logro entender a que hace referencia .id

const usuario_id = users[key].id;```

Rodrigo Acevedo Gutiérrez

student•

Hola Eduardo, el id que le mandamos hace referencia al userId que nos devuelve el API en cada usuario que almacenamos en el arreglo de usuarios, el key que ocupamos en la acción traerPorUsuario hace referencia al indice del arreglo donde guardamos los usuarios en el estado y al cual le dimos click en el icono del ojo. Puede ser algo confuso pero te recomiendo que trates de seguir todo el flujo del código.

Alexis Steven Valderrama

student•

Sin duda una de las cosas mas dificiles de redux es el manejo de tareas asincronas y hay diferencias para hacerlo entre componentes de clase y funcionales. En los funcionales requiere un poquito de trucos. Estas clases sin duda me estan haciendo la vida mas facil

José Joel Jacquez Gil

student•

Mandar por parametro una variable para ser usada en las acciones de reducer

José Joel Jacquez Gil

student•

Hacer uso de los datos del estado de un reducer en un action

Ricardo Medina

student•

Hola @cryptt3r, usa el state del store no del reducer ojito ojito con eso. El state y los reducers son dos cosas distintas.

async componentDidMount() {
    const { users, match: { params: { key } } } = this.props
    if (!users.length) {
      await this.props.getAllUsers()
    }
    await this.props.getPublicationsByUser(key)
  }

 useEffect(() => {
    if (!props.usuariosReducer.usuarios.length){
      console.log('dsfs');
      (async => props.usuariosTraerTodos())(); 
    }
    props.publicacionesTraerPorUsuario(props.match.params.key);
  }, [])

const productos = [] //Array vacío

//Se hace la primera petición get a la página 1 y se agregan al array

productos = productos.concat(response.data)

//Después el usuario pide ver más, se hace una petición get a la página 2 y se agregan al final del array

/*Imagina que las páginas empiezan en la 1 y sólo quieres las primeras 10*/
/* Imaginando también que estamos usando axios, como en el curso*/

let publicaciones = []

for(let i = 1; i < 10; i++) {
	const response = await axios.get(`https://api.com/publicaciones?page=${i}`)

	publicaciones = publicaciones.concat(response.data)
}

/*Al final tendrías tu array con las 10 páginas*/

 useEffect(() => {
    if (!props.usuariosReducer.usuarios.length){
      console.log('dsfs');
      (async => props.usuariosTraerTodos())(); 
    }
    props.publicacionesTraerPorUsuario(props.match.params.key);
  }, [])

Uso del estado en la acción

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