es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo puedo acceder al valor de useParams dentro de un selector de redux como ownProps

28 Jul, 2023 Programación

Estoy usando la biblioteca “reselect” en redux para obtener los datos. Quiero obtener datos basados en el hook “useParams()” y luego pasarlos dentro de “mapStateToProps” como “ownProps” y luego a la función “selectCollection” que es un selector y acepta el valor de “useParams()”. Aparentemente, no reconoce “useParams()” como “ownProps” y eventualmente devuelve “undefined”. Por cierto, si paso una cadena dentro de “selectCollection(‘someString’)”, recibo los datos pero no usando el hook “useParams()”. Recibo el valor de “useParams” correctamente pero no puedo usarlo dentro de “mapStateToProps”, lo cual creo que es un problema de alcance. Intenté definir una variable global pero no funcionó.

import { connect } from ‘react-redux’;
import { Outlet, useParams } from ‘react-router-dom’;
import { selectCollection } from ‘../../redux/shop/Shop-selectors’;

const CollectionPage = ({ collection }) => {
const params = useParams();
const paramsId = params.collectionId;
console.log(collection);

return (

Esta es la página de la colección para {paramsId}

);
};

// – Si registro ‘paramsId’, obtengo “undefined” ya que está fuera de la función.

const mapStateToProps = (state, ownProps) => ({
// Aquí es donde quiero usar “paramsId” como “ownProps”
collection: selectCollection(ownProps.paramsId)(state),
});

export default connect(mapStateToProps)(CollectionPage);

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema aquí es que useParams() no está disponible dentro de mapStateToProps. Para solucionarlo, necesitas pasar paramsId como una propiedad a tu componente CollectionPage y luego pasar esa propiedad al selector selectCollection en mapStateToProps.

    Aquí te muestro cómo puedes modificar tu código:

    import { connect } from 'react-redux';
import { Outlet, useParams } from 'react-router-dom';
import { selectCollection } from '../../redux/shop/Shop-selectors';

const CollectionPage = ({ collection, paramsId }) => {
  console.log(collection);

  return (
    <div classname="collection-page">
      Esta es la página de la colección para {paramsId}
      <outlet></outlet>
    </div>
  );
};

const mapStateToProps = (state, ownProps) => ({
  collection: selectCollection(ownProps.paramsId)(state),
});

const ConnectedCollectionPage = connect(mapStateToProps)(CollectionPage);

const CollectionPageWrapper = () => {
  const params = useParams();
  const paramsId = params.collectionId;

  return <connectedcollectionpage paramsid="{paramsId}"></connectedcollectionpage>;
};

export default CollectionPageWrapper;

    En este ejemplo, estamos creando un nuevo componente CollectionPageWrapper que reemplaza tu componente CollectionPage original. Dentro de CollectionPageWrapper, utilizamos useParams para obtener collectionId y luego lo pasamos como una propiedad a ConnectedCollectionPage. Finalmente, exportamos CollectionPageWrapper en lugar de ConnectedCollectionPage.

    Ahora que paramsId es una propiedad de ConnectedCollectionPage, podemos acceder a ella en mapStateToProps utilizando ownProps.

Comments are closed.