Sharing Selectors Across Multiple Components

[alecperkey]

Hi-- I've been stuck on this for a couple days now and hoping for some help.

I am trying to follow the pattern described at the section 'Sharing Selectors Across Multiple Components' at the bottom of http://redux.js.org/docs/recipes/ComputingDerivedData.html.

However, I am running into an error in my middleware (from @erikras' RRUHR boilerplate)

Is this because I'm using reselect wrong and that getUsersByAgency should be a function? Or rather, is the middleware needing adjustment to support this component-bound selector creation recipe?

clientMiddleware.js:21 MIDDLEWARE ERROR: TypeError: (0 , _usersByAgencySelector.makeUsersByAgencySelector) is not a function
    at makeMapStateToProps (http://localhost:3001/dist/main-2ce09530495067c6e245.js:79745:80)

The compiled code generating the error:

    var makeMapStateToProps = function makeMapStateToProps() {
      var getUsersByAgency = (0, _usersByAgencySelector.makeUsersByAgencySelector)(); //**ERROR HERE
      var mapStateToProps = function mapStateToProps(state, props) {
        return {
          myAgencyUsers: getUsersByAgency(state, props)
        };
      };
      return mapStateToProps;
    };

    var AgencyUserList = (0, _reactRedux.connect)(makeMapStateToProps)(_UserList2.default);

    exports.default = AgencyUserList;
    module.exports = exports['default'];

AgencyUserList.js

import { connect } from 'react-redux';
import UserList from 'components/common/UserList';
import { makeUsersByAgencySelector } from 'selectors/makeUsersByAgencySelector';

const makeMapStateToProps = () => {
  const getUsersByAgency = makeUsersByAgencySelector();
  const mapStateToProps = (state, props) => {
    return {
      myAgencyUsers: getUsersByAgency(state, props)
    };
  };
  return mapStateToProps;
};

const AgencyUserList = connect(
  makeMapStateToProps
)(UserList);

export default AgencyUserList;

selectors/makeUsersByAgencySelector.js

import { createSelector } from 'reselect';

const getAgencyFilter = (state) =>
  state.loggedInUser.info.agencyId;

const getAgencies = (state) =>
  state.db.agencies;

const makeUsersByAgencySelector = () => {
  return createSelector(
    [ getAgencyFilter, getAgencies ],
    (agencyFilter, agencies) => {
      return agencies.filter(agency => agency.info.id === agencyFilter).users;
    }
  );
};

export default makeUsersByAgencySelector;

[markerikson]

Um... it doesn't look like you're actually exporting makeUsersByAgencySelector. Just stick an export in front of that definition.

[alecperkey]

Yeah, you are right... Thanks... sorry it wasn't a more interesting problem to solve facepalm

Its because I imported it as a child property (with destructured syntax) when I only exported a default....

The guide must have some file like selectors/index.js which imports all the selectors as defaults and exports them as child properties

[jewertow]

Do you really need use this pattern? Your selectors doesn't depend on props, so these selectors always will be correctly memoized.