Rewrite a mapStateToProps for a useSelector

user_16817343 0
Viewed 237

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);
redux reactjs javascript
1 Answers

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>
  );
});
user_16419410
Related