用了一个买的 ui 框架...除了主路由都是异步加载的.....现在有个问题
const selectGogamechen1 = () => (state) => state.get('groups');
/**
* Default selector used by Gogamechen1
*/
const makeSelectGogamechen1 = () => createSelector(
selectGogamechen1(),
(substate) => {
console.log(substate);
substate.toJS();
}
如果第一个访问的页面不是 groups, 其他页面的组件调用 makeSelectGogamechen1 就会报错。
原因是 groups 路由的 reducer 还没被载入.makeSelectGogamechen1 的 substate 是 undefined
现在想到的解决方法是
方法一和方法二我都不找不到咋写, 网上一搜全是异步加载的 orz
请帮帮我这个 js 加 react 小白
入口代码
const rootRoute = {
component: App, //这个是主路由,一开始就加载了
childRoutes: createRoutes(store),
};
// Inject default app sagas
sagas.map(store.runSaga);
const render = (messages) => {
ReactDOM.render(
<Provider store={store}>
<LanguageProvider messages={messages}>
<Router
history={history}
routes={rootRoute}
render={
// Scroll to top when going to a new page, imitating default browser
// behaviour
applyRouterMiddleware(useScroll())
}
/>
</LanguageProvider>
</Provider>,
document.getElementById('app')
);
};
createRoutes 里的异步加载代码
const loadModule = (cb) => (componentModule) => {
cb(null, componentModule.default);
};
export default function createRoutes(store) {
// create reusable async injectors using getAsyncInjectors factory
const { injectReducer, injectSagas } = getAsyncInjectors(store); // eslint-disable-line no-unused-vars
return [
{
path: 'apiDemo',
name: 'apiDemoPage',
getComponent(nextState, cb) {
const importModules = Promise.all([
System.import('containers/ComponentDemos/ApidemoPage/reducer'),
System.import('containers/ComponentDemos/ApidemoPage/sagas'),
System.import('containers/ComponentDemos/ApidemoPage'),
]);
const renderRoute = loadModule(cb);
importModules.then(([reducer, sagas, component]) => {
injectReducer('apidemo', reducer.default);
injectSagas(sagas.default);
renderRoute(component);
});
importModules.catch(errorLoading);
},
},{
path: 'groups',
name: 'groupPage',
// component: {},
getComponent(nextState, cb) {
const importModules = Promise.all([
System.import('containers/Gogamechen1/reducer'),
System.import('containers/Gogamechen1/GroupPage/sagas'),
System.import('containers/Gogamechen1/GroupPage'),
]);
const renderRoute = loadModule(cb);
importModules.then(([reducer, sagas, component]) => {
injectReducer('groups', reducer.default);
injectSagas(sagas.default);
renderRoute(component);
});
importModules.catch(errorLoading);
},
},
];
}
请问我怎么让 groups 不异步加载而是和 App 一样访问任何页面都加载
库版本
"material-ui": "^0.18.7",
"minimist": "1.2.0",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-addons-css-transition-group": "^15.4.2",
"react-dom": "^15.6.1",
"react-helmet": "3.2.2",
"react-image-gallery": "^0.8.3",
"react-intl": "^2.4.0",
"react-redux": "^5.0.5",
"react-router": "^3.0.2",
"react-router-redux": "4.0.6",
"react-router-scroll": "^0.4.2",
"react-tap-event-plugin": "^2.0.1",
"recharts": "^1.0.0-alpha.4",
"redux": "3.6.0",
"redux-immutable": "3.0.8",
"redux-saga": "^0.15.4",
"reselect": "2.5.4",
1
lolizeppelin OP const makeSelectGogamechen1 = () => createSelector(
selectGogamechen1(), (substate) => { console.log(substate); substate.toJS(); } 这里加打印稍微弄错了下代码 是 return substate.toJS(); |
2
lolizeppelin OP 我用了一个假冒的方式.....让那边页面判断...但这好像不是一个正规的解决方式...
const makeSelectGogamechen1 = () => createSelector( selectGogamechen1(), (substate) => { console.log(substate); if (substate === undefined) return { group: null }; return substate.toJS(); } ); 引用页面判断 group === null 就跳转 |
3
otakustay 2018-04-02 13:10:49 +08:00
你要同步 reducer 也要同步,在 createStore 的时候就直接准备好 reducer 创建出来
|
4
meszyouh 2018-04-02 14:03:37 +08:00 via Android
groups 是顶级路由吧?直接写在外面,不用 wepack 的 import
|