Conexión a un componente

Clase 15 de 57 • Curso de Redux por Bedu

Ismael Teixeira

student•

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

Leonardo Casallas Beltran

student•

Yo tambien lo entendía así y me confundí, pero al leer la documentación del [combineReducers] (https://es.redux.js.org/docs/api/combine-reducers.html) el retorna todas las funciones en uno entonces entendí la teoría del profesor. Pero para que lo sigas manejando como estas acostumbrado puedes manejarlo como yo lo hice:

const mapStateToProps = (reducers) =&gt; {
  return {
    usuarios: reducers.usuariosReducer.usuarios,
  };
};

César Ernesto Rivas Martínez

student•

Solo un detalle que falto, es que la función no se tiene que llamar por obligación mapStateToProps, esta puede llevar otro nombre e igual funciona, la razón de llamarlo así, es para que se entienda mejor

const State = (reducers) => {
	return reducers.usuariosReducers
}

export default connect(State, {})(Usuarios)

Daniel Páez

student•

Te comparto mi sintesis de la clase.

¿Cómo conectar un componente de React a Redux ?

Como puntos previos ya en esta clase debes tener instalado redux y haberlo configurado en el index.js de tu app
Importa el método connect de React Redux

import { connect } from "react-redux"

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;

}

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

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

¡Verifica y Celebra! Ya aqui debes poder acceder al estado inicial de tu reducer a través de los props de tu componente

Armando de jesus santiz lopez

student•

hola, creo que en este vídeo esta mal explicado por favor corríjanme si estoy equivocado, me tuvo un poco confundido al principio... la funciona mapStateToProps no recibe los reducers sino el estado de nuestro store,

function mapStateToProps(state) {...}

el parámetro que recibe mapStateToProps es el mismo objeto que nos retorna al ejecutar store.getState();

de hecho los reduces son los encargados de actualizar el estado de nuestra aplicación se ejecutan automáticamente al despachar acciones, en ningún momento vamos a usarlo dentro de un componente.

Roberto Del Valle

student•

Gracias por el aporte

Johan García Trejo

student•

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.

Willy David Da Conceicao Lozada

student•

Explicación detallada de esta clase.

Robert Romero Medina

student•

Gracias 🙌

Willy David Da Conceicao Lozada

student•

de nada

Ricardo Medina

student•

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

Brayan Mateo Montañez Baron

student•

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)

Paul Cortes

student•

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

Fernando Pioli Martínez

student•

Es muy bueno el tema del console.log para entender la conectividad del código pero también es cierto que hay que asimilar algunas partes del proceso con memoria y entrenamiento. Por ejemplo todo lo que se hace en el minuto 2 de esta clase. Eso no se puede debugear. O sea, creo que es un poco y un poco en la etapa de aprendizaje.

Ever Alfredo Sorto Ayala

student•

Solo para salir de la duda ? cuando mapStateTopProps lo unico que hace es traer los props ?

const mapStateToProps = (reducers) => {
  return {
    usuarios: reducers.usuariosReducer.usuarios,
  };
};```

Joaquín Rafael Montes

student•

Sí, mapStateToProps es la convención para traer el estado desde los reducers y conectarlo con el componente.

Mario Abraham Ochoa Tovar

student•

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.

Jhean Pacheco

student•

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

Yair Vargas

company_admin•

Pero la función mapStateToProps como conoce sabe que le entra el estado? no veo que haya definido de donde vienen estos reducers ni nada similar y por lo que probé no es una palabra reservada, ni tampoco lo es mapStateToProps. siento que aparece muy olímpicamente. Hombre si usted entendió de verdad le agradecería si me ayuda a entender esto.

Jhean Pacheco

student•

Claro, mapStateToProps permite incluir el estado en las propiedades del componente mediante la funciónn connect() que es entregada por Redux, esta se incluye al momento de exportar el componente permitiendo incluir el store mediante mapStateToProps o las acciones mediante mapDispatchToProps.

Si se te hace un poco cmplicado el uso de connect() puedes usar los Hooks para Redux que ya estan disponibles, se hace un poco mas entendible el ciclo y el código es más legible.

Hooks de Redux

Espero haberte ayudado.

softdynamic sac

student•

¿Cómo haría para retornar 2 o más reducers?

Sería así?

return {state.aReducer,state.bReducer}

Juan Felipe Salamanca Gonzalez

student•

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.

Christian Compean

student•

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

Edgar Lopez Arroyo

student•


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

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

Frank Antonio Piñin Ato

student•

Alguien me puede ayudar coon ese error

Frank Antonio Piñin Ato

student•

import React, { Component } from "react";
import { connect } from "react-redux";

class Usuarios extends Component {
  // async componentDidMount() {
  // 	const respuesta = await axios.get('https://jsonplaceholder.typicode.com/users');
  // 	this.setState({
  // 		usuarios: respuesta.data
  // 	});
  // }

  ponerFilas = () =>
    this.props.usuarios.map(usuario => (
      <tr key={usuario.id}>
        <td>{usuario.name}</td>
        <td>{usuario.email}</td>
        <td>{usuario.website}</td>
      </tr>
    ));

  render() {
    return (
      <div>
        <table className="tabla">
          <thead>
            <tr>
              <th>Nombre</th>
              <th>Correo</th>
              <th>Enlace</th>
            </tr>
          </thead>
          <tbody>{this.ponerFilas()}</tbody>
        </table>
      </div>
    );
  }
}

const mapStateToProps = reducers => {
  return reducers.usuariosReducer;
};

export default connect(mapStateToProps, {
  /*Accion Creator*/
})(Usuarios);

Ese es mi codigo

Matthew Dominick Rosell Felix

student•

Los solucionaste?

Cristhian Laurente López

student•

mucho por aprender dios

Cristobal Vega

student•

Eso es bueno @cristhianlaurente, significa que estás creciendo :muscle:

Betsabet Geraldine Rojas Medina

student•

cual es la diferencia entre poner el mapStateToProps asi

const mapStateToProps = (reducers) => {
  return reducers.usuarioReducer;
}

de este

const mapStateToProps = state => {
  return {
    usuarios:state.usuarios,
  }
}

Cristopher Valentin Almonte

student•

Necesito ayuda please

TypeError: Cannot read property 'map' of undefined Usuarios.ponerFilas

4 | 5 | import * as usuariosActions from '../../actions/usuariosActions'; 6 |

7 | class Usuarios extends React.Component { 8 | 9 | async componentDidMount() { 10 | // const respuesta = await axios.get('https://jsonplaceholder.typicode.com/users');

Santiago Botero Ruiz

student•

Creo que necesitamos un poco más de detalle de como estás implementando el map y en que lugar lo tienes. A veces el error sale cuando la propiedad llega como undefined y como undefined no es un arreglo no permite usar map. Te recomiendo dos cositas:

Revisar el código que se estén comunicando los componentes
Revisar las variables que las variables están bien nombradas, prestando también atención a las mayúsculas y minúsculas

Cristopher Valentin Almonte

student•

Muchas gracias hermano por su aporte revisare todo y cualquier cosa escribo otra ves y le muestro un capture 💪

Erick Sánchez Noguerón

student•

Como es que recibe los reducers nuestra funcion mapStateToProps?

Arnoldo Ricardo HR

student•

connect se la pasa internamente aqui

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

y la creas justamente aqui:

import reducers from './reducers';

import './index.css';

const store = createStore(
  reducers, // todos los reducers
  {} // estado inicial
);

Facundo Anibal Martinez

student•

tengo un error no se que es alguien me ayuda ?

Juan Castro

teacher•

¡Hola! ¿Podrías mostrarnos tu código? ¿Lo tienes publicado en GitHub? Así sin verlo es muy difícil adivinar cuál será la solución.

Juan Castro

teacher•

Aquí encuentras más información sobre tu error:

import React, { Component } from "react";
import { connect } from "react-redux";

class Usuarios extends Component {
  // async componentDidMount() {
  // 	const respuesta = await axios.get('https://jsonplaceholder.typicode.com/users');
  // 	this.setState({
  // 		usuarios: respuesta.data
  // 	});
  // }

  ponerFilas = () =>
    this.props.usuarios.map(usuario => (
      <tr key={usuario.id}>
        <td>{usuario.name}</td>
        <td>{usuario.email}</td>
        <td>{usuario.website}</td>
      </tr>
    ));

  render() {
    return (
      <div>
        <table className="tabla">
          <thead>
            <tr>
              <th>Nombre</th>
              <th>Correo</th>
              <th>Enlace</th>
            </tr>
          </thead>
          <tbody>{this.ponerFilas()}</tbody>
        </table>
      </div>
    );
  }
}

const mapStateToProps = reducers => {
  return reducers.usuariosReducer;
};

export default connect(mapStateToProps, {
  /*Accion Creator*/
})(Usuarios);

Conexión a un componente

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

Uso del estado en la acción

Evitar segundas búsquedas

Inmutabilidad

Evitar sobrescritura

Validación compuesta

Validación de errores

Modificando respuesta de url

Estado con interacción

Mostrar componentes dinámicamente

Llamadas asincronas dinámicas

Props por herencia vs estado

Estado compartido

Métodos HTTP

Introducción a métodos HTTP

Nuevo ciclo Redux

Normalizar datos

Mapear Objetos

Componente para agregar tarea

Manejar inputs con Reducer

POST

Deshabilitando botón

Redireccionar

Reutilizar componentes

PUT

DELETE

Últimos detalles

Conclusión

Conocimientos adquiridos

Qué hacer a continuación