useParams() y luego pasarlos dentro de mapStatetoProps como ownProps y luego a la función selectionCollection 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 selectionCollection('someString) , recibo los datos pero no uso el gancho useParams() . Recibo el useParams value successfully pero no puedo usarlo dentro mapStateToProps , lo que creo que es un problema de alcance. Definí 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 ( <div className="collection-page"> <p>THis is the collection page for {paramsId}</p> <Outlet /> </div> ); }; //-- If I log the 'paramsId', I get undefined since it's outside the function const mapStateToProps = (state, ownProps) => ({ // here is where I wanna use the paramsId as ownProps collection: selectCollection(ownProps.paramsId)(state), }); export default connect(mapStateToProps)(CollectionPage);Creo que puede lograr esto de diferentes maneras, pero le sugiero dos formas de usar un parámetro que proviene de useParams Hook y mezclarlo con reaccionar redux
1- Cree otro componente de nivel superior para obtener los parámetros del enrutador y pasarlos al componente CollectionPage, de modo que en mapStateToProps pueda acceder a esos parámetros de esta manera:
const TopLevelCollectionPage = () => { const params = useParams(); <CollectionPage params={params}></CollectionPage>; }; const CollectionPage = ({ collection }) => { return ( <div className="collection-page"> <p>THis is the collection page</p> <Outlet /> </div> ); }; const mapStateToProps = (state, ownProps) => ({ collection: selectCollection(ownProps.params.collectionId)(state), }); export default connect(mapStateToProps)(CollectionPage);2- usar ganchos de reacción redux para obtener el estado dentro de su componente
const CollectionPage = () => { const params = useParams(); const collection = useSelector((state) => selectCollection(params.collectionId)(state) ); //or //const collection = useSelector(selectCollection(params.collectionId)); };