Avoid passing whole store state to the component

src/containers/EditListingPage/EditListingPage.js

@@ -44,7 +44,6 @@ export class EditListingPageComponent extends Component {
 
   render() {
     const {
-      storeState,
       intl,
       onCreateListing,
       onImageUpload,
@@ -53,11 +52,12 @@ export class EditListingPageComponent extends Component {
       params,
       type,
       currentUser,
+      getListing,
     } = this.props;
     const isNew = type === 'new';
-    const id = page.submittedListingId || (params && new types.UUID(params.id));
-    const listingsById = getListingsById(storeState, [id]);
-    const currentListing = listingsById.length > 0 ? listingsById[0] : null;
+    const hasIdParam = params && params.id;
+    const id = page.submittedListingId || (hasIdParam ? new types.UUID(params.id) : null);
+    const currentListing = getListing(id);
 
     const shouldRedirect = page.submittedListingId && currentListing;
     const showForm = isNew || currentListing;
@@ -129,7 +129,6 @@ EditListingPageComponent.defaultProps = {
 const { func, object, shape, string } = PropTypes;
 
 EditListingPageComponent.propTypes = {
-  storeState: object.isRequired,
   intl: intlShape.isRequired,
   onCreateListing: func.isRequired,
   onLoadListing: func.isRequired,
@@ -142,13 +141,18 @@ EditListingPageComponent.propTypes = {
   }),
   type: string,
   currentUser: propTypes.currentUser,
+  getListing: func.isRequired,
 };
 
 const mapStateToProps = state => {
   const page = state.EditListingPage;
-  const storeState = state;
   const { currentUser } = state.user;
-  return { page, storeState, currentUser };
+
+  const getListing = id => {
+    const listings = getListingsById(state, [id]);
+    return listings.length === 1 ? listings[0] : null;
+  };
+  return { page, currentUser, getListing };
 };
 
 const mapDispatchToProps = dispatch => {

src/containers/EditListingPage/EditListingPage.test.js

@@ -5,14 +5,10 @@ import { EditListingPageComponent } from './EditListingPage';
 
 describe('EditListingPageComponent', () => {
   it('matches snapshot', () => {
-    const state = {
-      marketplaceData: {
-        entities: {},
-      },
-    };
+    const getListing = () => null;
     const tree = renderShallow(
       <EditListingPageComponent
-        storeState={state}
+        getListing={getListing}
         images={[]}
         intl={fakeIntl}
         onCreateListing={v => v}

src/containers/ListingPage/ListingPage.js

@@ -20,12 +20,6 @@ const MODAL_BREAKPOINT = 2500;
 
 const { UUID } = types;
 
-const denormaliseListing = (storeState, params) => {
-  const id = new UUID(params.id);
-  const listingsById = getListingsById(storeState, [id]);
-  return listingsById.length > 0 ? listingsById[0] : null;
-};
-
 const priceData = (price, currencyConfig, intl) => {
   if (price && price.currency === currencyConfig.currency) {
     const priceAsNumber = convertMoneyToNumber(price, currencyConfig.subUnitDivisor);
@@ -56,8 +50,8 @@ export class ListingPageComponent extends Component {
   }
 
   onSubmit(values) {
-    const { dispatch, flattenedRoutes, history, storeState, params } = this.props;
-    const listing = denormaliseListing(storeState, params);
+    const { dispatch, flattenedRoutes, history, getListing, params } = this.props;
+    const listing = getListing(params.id);
 
     this.setState({ isBookingModalOpenOnMobile: false });
 
@@ -88,9 +82,9 @@ export class ListingPageComponent extends Component {
   }
 
   render() {
-    const { params, storeState, showListingError, intl, currentUser } = this.props;
+    const { params, showListingError, intl, currentUser, getListing } = this.props;
     const currencyConfig = config.currencyConfig;
-    const currentListing = denormaliseListing(storeState, params);
+    const currentListing = getListing(params.id);
 
     const attributes = currentListing ? currentListing.attributes : {};
     const {
@@ -184,7 +178,7 @@ ListingPageComponent.defaultProps = {
   currentUser: null,
 };
 
-const { arrayOf, func, instanceOf, object, oneOf, shape, string } = PropTypes;
+const { arrayOf, func, instanceOf, oneOf, shape, string } = PropTypes;
 
 ListingPageComponent.propTypes = {
   // from connect
@@ -196,21 +190,26 @@ ListingPageComponent.propTypes = {
   }).isRequired,
   // from injectIntl
   intl: intlShape.isRequired,
-  storeState: object.isRequired,
   params: shape({
     id: string.isRequired,
     slug: string.isRequired,
   }).isRequired,
   showListingError: instanceOf(Error),
   currentUser: propTypes.currentUser,
+  getListing: func.isRequired,
   tab: oneOf(['book', 'listing']),
 };
 
 const mapStateToProps = state => {
-  const storeState = state;
   const { showListingError } = state.ListingPage;
   const { currentUser } = state.user;
-  return { storeState, showListingError, currentUser };
+
+  const getListing = id => {
+    const listings = getListingsById(state, [id]);
+    return listings.length === 1 ? listings[0] : null;
+  };
+
+  return { showListingError, currentUser, getListing };
 };
 
 const ListingPage = connect(mapStateToProps)(withRouter(injectIntl(ListingPageComponent)));

src/containers/ListingPage/ListingPage.test.js

@@ -12,7 +12,7 @@ describe('ListingPage', () => {
   it('matches snapshot', () => {
     const currentUser = createCurrentUser('user-2');
     const listing1 = createListing('listing1', createUser('user-1'));
-    const storeState = { marketplaceData: { entities: { listing: { listing1 } } } };
+    const getListing = () => listing1;
     const props = {
       dispatch: () => console.log('Dispatch called'),
       flattenedRoutes: [],
@@ -21,8 +21,8 @@ describe('ListingPage', () => {
         push: () => console.log('HistoryPush called'),
       },
       params: { slug: 'listing1-title', id: 'listing1' },
-      storeState,
       currentUser,
+      getListing: getListing,
       intl: fakeIntl,
       onLoadListing: () => {},
     };