Undefined State Reselect Js

Question

I am getting the following error: substate is undefined. However, I am not sure why substate would be undefined in my selector. Could someone please help me figure out what might be going wrong?

Selector:

import { createSelector } from 'reselect';

/**
 * Direct selector to the organization state domain
 */
const selectOrganizationDomain = () => (state) => state.get('organization');

/**
 * Other specific selectors
 */


/**
 * Default selector used by organization
 */

const selectOrganization = () => createSelector(
  selectOrganizationDomain(),
  (substate) => substate.toJS()
);

const selectChanges = () => createSelector(
  selectOrganization(),
  (substate) => substate.get('changes')
)

export default selectOrganization;
export {
  selectOrganizationDomain,
  selectChanges
};

Answer 1

Your selectOrganizationDomain should be a function that returns .get('organization') on the state:

const selectOrganizationDomain = state => state.get('organization');

Your composed selectors should be the result of the invocation of createSelector, with the other selector functions passed in as arguments to createSelector:

const selectOrganization = createSelector(
  selectOrganizationDomain,
  substate => substate.toJS()
);

const selectChanges = createSelector(
  selectOrganization,
  substate => substate.get('changes')
);

Answer 2

The problem is your .toJS() in selectOrganization. I suppose organization in your state tree is immutable. It transforms your immutable object into a regualr JS object. For a regular object the get function is not defined.

Just get rid of selectOrganization and try selectChanges as:

const selectChanges = () => createSelector(
  selectOrganizationDomain(),
  (substate) => substate.get('changes')
)

Answer 3

I think createSelector is expecting you to pass a selctor for the first argument, not the result of calling a selector:

const selectChanges = () => createSelector(
  selectOrganization, // no ()
  (substate) => substate.get('changes')
)

Answer 4

I figured out the problem. In my routes.js, I forgot to inject my reducer/other modules. This was fixed with the following:

{
      path: '/org',
      name: 'organization',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          System.import('containers/Organization/reducer'),
          System.import('containers/Organization/sagas'),
          System.import('containers/Organization'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, sagas, component]) => {
          injectReducer('organization', reducer.default);
          injectSagas(sagas.default);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    },