Me disculpo de antemano, mi inglés es malo. Estoy tomando un curso sobre reaccionar y quiero reescribir este componente para usar Selector, pero no puedo. Uno de los accesorios está destinado a ser indefinido. Quien me puede explicar como hacer esto? También estoy usando la biblioteca "Volver a seleccionar"
Código:
import React from "react"; import { connect } from "react-redux"; import CollectionItem from "../../components/CollectionItem/CollectionItem"; import "./CollectionPage.scss"; import { selectCollection } from "../../redux/shop/shop.selectors"; const CollectionPage = ({ collection }) => { console.log(collection); return ( <div className="collection-page"> <h2>COLLECTION PAGE</h2> </div> ); }; const mapStateToProps = (state, ownProps) => ({ collection: selectCollection(ownProps.match.params.collectionId)(state), }); export default connect(mapStateToProps)(CollectionPage);Los selectores parametrizados se explican con más detalle aquí
Su código podría verse algo así:
//method to get all collections const selectCollections = (state) => state.collections; //method to create a selector that gets a selection by id const createSelectCollectionById = (collectionId) => createSelector( [selectCollections], //all collections (collections) => //just guessing the logic to get collection by id collections.find(({ id }) => id === collectionId) ); //use react memo to crate a memoized component const CollectionPage = React.memo(function CollectionPage( props ) { //collection id to create dependency for useMemo const collectionId = props.match.params.collectionId; //crate selector for this collection id const selectCollectionById = React.useMemo( () => createSelectCollectionById(collectionId), [collectionId] ); //use the selector to get the collection item const collection = useSelector(selectCollectionById); console.log(collection); return ( <div className="collection-page"> <h2>COLLECTION PAGE</h2> </div> ); });