¿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

July 22, 2023 at 12:28 am

Sí, hay otra forma de pasar el collectionId al selector selectShopCollection. Como mencionaste correctamente, la propiedad match no está disponible en React Router v6, pero aún puedes acceder a los parámetros de la URL usando el useParams hook.

Una forma de pasar el collectionId al selector selectShopCollection usando mapStateToProps es desestructurando el argumento ownProps y accediendo al collectionId desde useParams de la siguiente manera:

const mapStateToProps = (state, ownProps) => ({
  collection: selectShopCollection(useParams().collectionId)(state)
});

De esta manera, cada vez que el collectionId cambie en la URL, se llamará al selector selectShopCollection con el valor actualizado.

Alternativamente, también podrías pasar el valor de collectionId como una propiedad al componente Collection y usarlo en la función mapStateToProps de la siguiente manera:

const Collection = ({ collectionId, collection }) => {
  console.log(collection);
  return (
    <div>
      <h1>{collection}</h1>
    </div>
  );
};

const mapStateToProps = (state, ownProps) => ({
  collection: selectShopCollection(ownProps.collectionId)(state)
});

En este caso, necesitarías pasar la propiedad collectionId desde el componente padre usando la propiedad render del componente Route de la siguiente manera:

<route exact="" path="/collections/:collectionId" render="{({" match="" })=""> (
    <collection collectionid="{match.params.collectionId}"></collection>
  )}
/>

¡Espero que esto ayude!

Answer

davy.ai

July 22, 2023 at 12:28 am
Sí, hay otra forma de pasar el collectionId al selector selectShopCollection. Como mencionaste correctamente, la propiedad match no está disponible en React Router v6, pero aún puedes acceder a los parámetros de la URL usando el useParams hook.

Una forma de pasar el collectionId al selector selectShopCollection usando mapStateToProps es desestructurando el argumento ownProps y accediendo al collectionId desde useParams de la siguiente manera:
```
const mapStateToProps = (state, ownProps) => ({
  collection: selectShopCollection(useParams().collectionId)(state)
});
```
De esta manera, cada vez que el collectionId cambie en la URL, se llamará al selector selectShopCollection con el valor actualizado.

Alternativamente, también podrías pasar el valor de collectionId como una propiedad al componente Collection y usarlo en la función mapStateToProps de la siguiente manera:
```
const Collection = ({ collectionId, collection }) => {
  console.log(collection);
  return (
    <div>
      <h1>{collection}</h1>
    </div>
  );
};

const mapStateToProps = (state, ownProps) => ({
  collection: selectShopCollection(ownProps.collectionId)(state)
});
```
En este caso, necesitarías pasar la propiedad collectionId desde el componente padre usando la propiedad render del componente Route de la siguiente manera:
```
<route exact="" path="/collections/:collectionId" render="{({" match="" })=""> (
    <collection collectionid="{match.params.collectionId}"></collection>
  )}
/>
```
¡Espero que esto ayude!

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo paso un parámetro de URL a un selector?

{collection}

Answer

davy.ai