I apologize in advance, my English is bad. I am taking a course on react, and I want to rewrite this component to useSelector, but I can't. One of the props is bound to be undefined. Who can explain to me how to do this? I am also using the library "Reselect"
Code:
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);
Parameterized selectors are explained in more detail here
Your code could look somewhat like this:
//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>
);
});