substate.get() is not a function using React Boile

Question

I have a component called Login, and these selectors:

const selectLogin = () => (state) => state.get('login');
const selectUser = () => createSelector(
  selectLogin(),
  (loginState) => loginState.get('user')
);

Here's what state looks like for the "login" component:

login: {
    user: {
      id: 206
    }
}

In another component, I want to select the "user" object.

At the top of my file, I have

import { createStructuredSelector } from 'reselect';

import {
  selectLogin,
  selectUser
} from 'containers/Login/selectors';

const mapStateToProps = createStructuredSelector({
  login: selectLogin(),
  user: selectUser(),
});

When I use "selectUser()", I get "loginState.get is not a function".

If I remove all references to "selectUser()", I can access this.props.login.user. That works for me, but I want to know why I can't select from within the "login" state. The examples use the same "substate" convention in the selector, and they work. Any ideas?

Answer 1

Is this another component in another route?

You have to manually inject reducers and sagas required for the page in each route.

In route.js, loadReducer and inject it to the page, something like this:

 {
            path: '/projects/add',
            ...
            getComponent(nextState, cb) {
                const importModules = Promise.all([
                    System.import('containers/Project/reducer'),
                    System.import('containers/Login/reducer')
                    ...
                ]);

                const renderRoute = loadModule(cb);

                importModules.then(([projectReducer, loginReducer ...]) => {
                    injectReducer('projects', projectReducer.default);
                injectReducer('login', projectReducer.default);
                    renderRoute(component);
                });

                importModules.catch(errorLoading);
            },