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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

Múltiples Reducers

29/57
Recursos

Aportes 21

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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

  1. Creamos el propio reducer del componente Publicaciones llamado (publicacionesReducer) este solo retorna el estado

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

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

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

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

A mi usuariosReducer me sigue trayendo 10!!!

Final inesperado jaja

Entonces el mapDispatchToProps es cundo utilizamos varias acciones?

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
}

Soy yo o esta clase estuvo mas confusa que las demas

final inesperado

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
·

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.

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

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

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

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

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

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

La clase fue muy confusa

Super excelente nuevamente la sorpresa del error

Esto parece un final de temporada, veamos que pasa

Este tema me vuela la cabeza, he tenido que verlo ya mas de 3 veces para tratar de entender, pero aun no puedo.

http://jsonplaceholder.typicode.com/posts```