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

问题

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?

回答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);
            },

来源：https://stackoverflow.com/questions/41880737/substate-get-is-not-a-function-using-react-boilerplate

标签

reselect

react-boilerplate