Múltiples Reducers

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

Jessie Buckland Pérez

student•

mapDispatchToProps. 1 - Paras el video. 2 - Vuelves a empezar a 0.5x. 3 - Repeat(); :D

Miguel Prada

student•

es el ciclo de vida de estos cursos jajajaja

Carlos Rosado

student•

ya veras que después esto lo pondrás en 1.5x

Oscar Miguel Fabian Bernal

student•

Una sugerencia, no me parece practico nombrar el archivo de los componentes con index, ya que cuando quiero navegr en vscode para buscarlo en la barra de arriba, veo varios archivos index y para diferenciarlos se tiene que ver la carpeta padre, no me parece practico. Entiendo que por defecto al llamar a una carpeta, se hace referencia al archivo index que tenga dentro pero por evitar una palabra en el import, me hace mas lento el navegar entre componentes

Diego Andres Cardenas Caro

student•

Lo práctico de estructurar el proyecto con carpetas en index para cada componente o seccion, viene cuando tu proyecto empieza a crecer, tienes que crear test, o componentes auxiliares, o estilos etc. Si mantienes el index solo tienes que hacer modificaciones en el index de cada componente y no en la estructura completa del proyecto para agregar los nuevos elementos.

jean pierre gabriel nieto acosta

student•

Exacto diego, además puedes llevar de manera más organizada el proyecto, en si es una buena práctica usar index en cada carpeta.

Willy David Da Conceicao Lozada

student•

Creamos el propio reducer del componente Publicaciones llamado (publicacionesReducer) este solo retorna el estado
Usamos ese reducer en el componente Publicaciones, en el mapStateToProps retornamos un objeto con los reducers y para acceder a atributos de ese reducer hay que acceder al objeto y después al atributo que necesitamos. This.props.usuariosReducer.usuarios
Creamos un action creator para publicacionesReducer (buscara las publicaciones de cierto usuario) y este reducer solo ejecuta la petición HTTP GET y ejecuta un dispatch
En el componente publicaciones al connect le pasamos un objeto llamado mapDispatchToProps (para especificar que acciones vamos a usar en este componente), estea variable solo despliega lo que tienen los actionsCreators}

Conclusión: creamos un reducer y un actions creator y lo conectamos al componente Publicaciones

Stiven Jiménez

student•

no se por que le encanta dejarnos con la intriga de como solucionar las cosas, es como una serie de Netflix,

Diego Bruno

student•

A mi usuariosReducer me sigue trayendo 10!!!

Gabriel Rodriguez

student•

Ya somos dos

Claudia Andrea Aparicio Chavez

student•

Final inesperado jaja

Entonces el mapDispatchToProps es cundo utilizamos varias acciones?

Gianpierre Fernandez

student•

Se podria decir que si

Abdiel Ortega

student•

Sí el objetivo es pasarle como props tus actions a tu componente.

En la documentación el nombre del segundo parametro del connect es mapDispatchToProps este puede ser una función o un objeto.

Referencias:

React Redux documentación

Alejandro Maimus

student•

Por que hizo falta destructurar “reducers” para colocar explicitamente {usuariosReducer, publicacionesReducer} ? Tenía entendido que al pasar como parámetro la expresión “reducers” se llamaban a todos

const mapStateToProps = (reducers) => {
  return reducers.usersReducer
}

Tampoco entendí muy bien por que en mapDispatchToProps se usan 3 puntos previo al nombre de cada action

const = mapDispatchToProps = {
	...usuariosActions,
	...publicacionesActions
}

Aram Ceballos

student•

Es el operador spread, te dejo un link para que lo veas mas a fondo. https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Sintaxis_Spread

Juan Castro

teacher•

El mapDispatchToProps es un objeto donde definimos las acciones que queremos usar. . El problema es que, en este caso, las acciones están guardadas en otros objetos (userActions y publicacionesActions). Podríamos pasar las propiedades de estos objetos al de mapDispatch una por una, pero usando el spread operator definimos que vamos a mandar todo y punto. :wink:

Frank Antonio Piñin Ato

student•

Soy yo o esta clase estuvo mas confusa que las demas

Augusto Gonzalez

student•

Estuvo bastante confusa xD

Cristhian Laurente López

student•

final inesperado

Cristopher Valentin Almonte

student•

Alguien me puede ayudar no me hace render en el componente de publicación y tengo todo bien codificado como el profesor lo esta haciendo no tengo errores pero no me hace render.

Luis Lira

student•

Podrías mostrar tu código por favor?

Cristopher Valentin Almonte

student•

hermano gracias ya pude resorberlo

Natalia Gonzalez Junco

student•

¿Cómo puedo mantener los datos del reducer al recargar la pagina estando en el componente de publicaciones?

Luis Enrique Mendez Gomez

student•

Hola Natalia! Cada vez que recargues la pagina desde el navegador el state vuelve a inicializarse. Los datos del reducer se mantienen mientras navegas en la aplicacion con <Link>

Juan David E.R.

student•

Hola podrias utilizar redux-persist; lo que hace es dejar persitente el estado de la aplicación y recuperarlo en caso de que se recargues la pagina.

Andrés Felipe Eslava Zuluaga

student•

Sí, la clase puede ser confusa, pero debo mencionar que a penas se creó el Reducer y el Action Creator de Publicaciones. Sin embargo es así la dinámica de este curso, TDD. Genial ·

Martin Fernandez

student•

Me parece una mala practica mezclar logica de negocios con los middleware. Esto es algo en lo que se cae frecuentemente. Deberia tener los llamados en otros ficheros y solo llamar a la funcion que hace la petición. Es decir, estaría bueno tener una carpeta services y dentro hacer estas llamadas. Todo esto deberia ser agnostico, nuestro action no tiene porque saber (y menos tener el codigo dentro) de donde viene la info.

Brayhan Alejandro Gabriel Guerrero

student•

Spoiler, en este video tambien lo finaliza con errores en la consola sin resolver.

Brayan Mateo Montañez Baron

student•

Tambien se puede retorna el mapStateToProps de la siguiente manera y quedaria igual:

const mapStateToProps = (state) => {
    return { usersReducer: state.usersReducer, postsReducer: state.postsReducer };
}

Jhon Alexander Romero Gonzaga

student•

Esto parece serie, deja con la intriga para el siguiente capitulo 🤷‍♀️

Cristian Andres Ladino Peña

student•

Interesante clase. Ando algo confundido con los contenidos de este curso pero espero volver a verlo completo y seguir todos los ejercicios para digerirlo y entenderlo mejor. 🙂

Johan García Trejo

student•

La clase fue muy confusa

Paul Cortes

student•

Super excelente nuevamente la sorpresa del error

David Dias

student•

Esto parece un final de temporada, veamos que pasa

Múltiples Reducers

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