Conexión a un componente

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.

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 ‘classProperties’ isn’t 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.