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

Conexi贸n a un componente

15/57
Recursos

Aportes 28

Preguntas 12

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Pienso que esta clase est谩 mal explicada y les cuento el por qu茅:

En la clase se dice que la funci贸n connect recibe como primer par谩metro la funci贸n mapStateToProps, la cu谩l recibe como par谩metro al reducer.

Esto es completamente falso y en mi caso me confundi贸 un mont贸n鈥 Seg煤n la documentaci贸n oficial de react-redux (https://react-redux.js.org/using-react-redux/connect-mapstate) la funci贸n mapStateToProps recibe como par谩metros el state y en caso opcional ownProps (propiesdades del componente).

Al colocar que mapStateToProps recibe al reducer nos saltamos por completo el flujo de redux (pues no llamamos en este caso a los actionCreators, recordar que es el action quien invoca al reducer).

Para m铆 este curso ha sido muy confuso y algo que me ha ayudado mucho ha sido ver el curso del 2018 impartido por Leonidas Esteban. Si han tenido los mismos problemas que yo les recomiendo pasar por all谩.

Te comparto mi sintesis de la clase.

驴C贸mo conectar un componente de React a Redux ?

  1. Como puntos previos ya en esta clase debes tener instalado redux y haberlo configurado en el index.js de tu app

  2. Importa el m茅todo connect de React Redux

import { connect } from "react-redux"

  1. Mapea el estado de redux a los props del componente llamando a los reducers que te interesen usar, en este caso para mi fue usersReducer
const mapStateToProps = (reducers) => {

  return reducers.usersReducer;

}
  1. Exporta tu componente usando el m茅todo connect para tenerlo conectado a los reducers y actions de Redux.

export default connect(mapStateToProps, {/*actions*/} )(Users);

  1. 隆Verifica y Celebra! Ya aqui debes poder acceder al estado inicial de tu reducer a trav茅s de los props de tu componente

Lo que hicimos fue en el componente index.js (usuarios) conectamos este componente con el reducer para poder usar ese almacenamiento global, creamos una funci贸n llamada mapStateToProps que recibe todos los reducers y le decimos que reducer queremos usar en este componente. Ya en el connect recibe la funci贸n mapStateToProps, las acciones y por ultimo nos llega por props ese reducer es decir el estado.

Explicaci贸n detallada de esta clase.

Lo que hicimos fue en el componente index.js (usuarios) conectamos este componente con el reducer para poder usar ese almacenamiento global, creamos una funci贸n llamada mapStateToProps que recibe todos los reducers y le decimos que reducer queremos usar en este componente. Ya en el connect recibe la funci贸n mapStateToProps, las acciones y por ultimo nos llega por props ese reducer es decir el estado.

Es importante resaltar que el primer argumento para una funci贸n mapStateToProps es todo el state del store Redux (el mismo valor devuelto por una llamada a store.getState ()).

const mapStateToProps = (state, props) => {
  return state.usersReducer
}

export default connect(mapStateToProps)(Users)

Docs connect-mapstate

Segun la documentaci贸n
mapStateToProps recibe como primer par谩metro todo el estado de almacenamiento de Redux
Y retorna un objeto plano con el data que el componente conectado necesite

Eg:

// TodoList.js

function mapStateToProps(state) {
  const { todos } = state
  return { todoList: todos.allIds }
}

export default connect(mapStateToProps)(TodoList)

Hay que tener cuidado como se nombran las variables porque pueden afectar en el paso de variables undefined, y resulta ser por una letra de mas que no notamos

una forma de solucionar este problema, es hacer los console.log() paso a paso

Esta clase confundi贸 un poco, les comento, lo que hace mapStateToProps es recibir el estado general y enviarlo a las props del componente.

La parte que confunde es que pareciera que se trae los reducers como tal cuando es el estado de cada reducer, en pocas palabras, se est谩 manejando el estado por partes, cada reducer maneja su estado y luego se los une con combineReducers.

Esta es una t茅cnica para manejar reducers por separado y luego unirlos (sus estados).

驴C贸mo har铆a para retornar 2 o m谩s reducers?

Ser铆a as铆?

return {state.aReducer,state.bReducer}

En pocas palabras lo que se realizo en la clase fue en el componente index.js (usuarios) conectamos el componente con el reducer que creamos para poder usar el almacenamiento global ademas creamos una funci贸n llamada mapStateToProps que recibe todos los reducers y le decimos el reducer que queremos usar en este componente.y ya por ultimo en el connect este recibe la funci贸n mapStateToProps, las acciones y por ultimo nos llega por los props el reducer es decir el estado.

Ese console.log(props) me hizo conocer el poder de React con Redux 馃挌

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

export default connect(mapStateToProps, {/* Actions Creators */})(Users);```


Alguien me puede ayudar coon ese error

mucho por aprender dios

connect():

Nos ayuda a conectar / pegar el componente con el store. Proporciona a su componente conectado los datos que necesita del store y las funciones que puede utilizar para enviar acciones al store.
No modifica la clase de componente que se le pasa; en cambio, retorna uno nuevo, una clase de componente conectado al store que envuelve al componente que se le pasa

mapStateToProps():

Nos ayuda acceder al objeto del nuevo estado que ofrece el store. Se encarga del estado, como tambi茅n el estado es el argumento que se pasa a la mapStateToProps.
Los retornos de mapStateToProps se conocen internamente como stateProps, es por eso que se puede acceder a ellos como props del componente.

Si se especifica una funci贸n mapStateToProps, el nuevo componente contenedor se suscribir谩 a las actualizaciones del store. Esto significa que cada vez que se actualice el store, se llamar谩 a mapStateToProps.

La funci贸n mapStateToProps debe devolver un objeto simple que contenga los datos que necesita el componente:

  1. Cada campo del objeto se convertir谩 en un accesorio para su componente actual ,
  2. Los valores de los campos se utilizar谩n para determinar si el componente necesita volver a renderizarse


Ac谩 se pueden informar mucho m谩s

Me gust贸 esta clase!

Hola Devs:
-Les comparto el progreso de como lo estoy haciendo yo:

Esta clase causa mucha confusi贸n, pero el buen camino b谩sicamente, la funci贸n connect recibe dos par谩metros mapStateToProps y mapDispatchToProps (Que se vera seguto mas adelante), la primera solicita datos del store (la base de datos) y el segundo env铆a datos.

Supongo que se filtran los props que se van a enviar al componente para mejorar el rendimiento de la aplicaci贸n. Si se pasan todos los par谩metros y despu茅s se filtran tendremos una aplicaci贸n mas lenta o algo as铆?

Excelente clase!

A mi me sale esto en mi consola
![](

Excelente clase. Veo mucho contenido en cada sesi贸n jaja. Tendr茅 que ir repasando todos los conceptos por internet para entenderlos mejor.

Alguien me da una mano me sale ese error no entiendo , es cuando coloco este c贸digo

Genial el uso de los reducers

es mucha informaci贸n. tengo mucho que aprender

Para las personas que esten haciendo su configuracion con webpack hay un problema con babel para que pueda manejar las clases

Support for the experimental syntax 鈥榗lassProperties鈥 isn鈥檛 currently enabled

este problema se le da solicion instalando la siguiente dependencia en devDependencies

@babel/plugin-proposal-class-properties

y posteriormente agregando la siguiente configuracion a .babelrc

{
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

Configuracion para .babelrc

Saludos espero que les sirva

Lo que entend铆:
La funci贸n connect() nos permite conectarnos con los reducers (state) para pasarlos al componente como props.
Connect lleva 2 par谩metros: el 1ero es la funci贸n mapStateToProps que devuelve el state que deseamos, y el 2do es un objeto con las Acciones que definiremos m谩s adelante. Connect devuelve una funci贸n a la que le pasamos como parametro nuestro componente Usuarios.