¿Cómo paso un parámetro de URL a un selector?
Recibo un parámetro de URL de useParams
. Quiero pasarlo a un selector usando mapStateToProps
.
componente collection.component.jsx
“`import React from “react”;
import { useParams } from “react-router-dom”;
import { connect } from “react-redux”;
import { selectShopCollection } from “../../redux/shop/shop.selectors”;
import ‘./collection.styles.scss’;
const Collection = ({ collection }) => {
const { collectionId } = useParams();
console.log(collection);
return (
{collection}
)
}
const mapStateToProps = (state, ownProps) => ({
collection: selectShopCollection(ownProps.match.params.collectionId)(state)
})
export default connect(mapStateToProps)(Collection);
archivo `shop.selectors.js`
import { createSelector } from “reselect”
const selectShop = state => state.shop
export const selectShopCollections = createSelector([selectShop], shop =>
shop.collections
)
export const selectShopCollection = collectionUrlParam =>
createSelector([selectShopCollections], collections =>
collections.find(collection => collection.id === collectionUrlParam)
)
“`
Supongo que el problema es que no puedo pasar los parámetros usando match
ya que react-router-dom v6 no los pasa en las props. ¿Hay alguna otra forma de pasar collectionId
al selector selectShopCollection
?
davy.ai
Sí, hay otra forma de pasar el
collectionId
al selectorselectShopCollection
. Como mencionaste correctamente, la propiedadmatch
no está disponible en React Router v6, pero aún puedes acceder a los parámetros de la URL usando eluseParams
hook.Una forma de pasar el
collectionId
al selectorselectShopCollection
usandomapStateToProps
es desestructurando el argumentoownProps
y accediendo alcollectionId
desdeuseParams
de la siguiente manera:De esta manera, cada vez que el
collectionId
cambie en la URL, se llamará al selectorselectShopCollection
con el valor actualizado.Alternativamente, también podrías pasar el valor de
collectionId
como una propiedad al componenteCollection
y usarlo en la funciónmapStateToProps
de la siguiente manera:En este caso, necesitarías pasar la propiedad
collectionId
desde el componente padre usando la propiedadrender
del componenteRoute
de la siguiente manera:¡Espero que esto ayude!