index.js是整个项目的入口文件。
// 1. Initialize
const app = dva({
history: createHistory(),
});
// 2. Plugins
app.use(createLoading());
// 3. Register global model
app.model(require('./models/global').default);
// 4. Router
app.router(require('./router').default);
// 5. Start
app.start('#root');
export default app._store; // eslint-disable-line
找到/src/common/menu.js中进行菜单配置,
在/src/common/router.js的routerConfig中配置路由,其中第一个参数是一个DvaInstance的实例,是index.js文件中定义的;第二个参数是该页面对应的model,即数据存储的地方;第三个参数是一个函数,返回对应的页面。
'/': {
component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
},
dynamicWrapper:
// wrapper of dynamic
const dynamicWrapper = (app, models, component) => {
// register models
models.forEach(model => {
if (modelNotExisted(app, model)) {
// eslint-disable-next-line
app.model(require(`../models/${model}`).default);
}
});
// () => require('module')
// transformed by babel-plugin-dynamic-import-node-sync
if (component.toString().indexOf('.then(') < 0) {
return props => {
if (!routerDataCache) {
routerDataCache = getRouterData(app);
}
return createElement(component().default, {
...props,
routerData: routerDataCache,
});
};
}
// () => import('module')
return Loadable({
loader: () => {
if (!routerDataCache) {
routerDataCache = getRouterData(app);
}
return component().then(raw => {
const Component = raw.default || raw;
return props =>
createElement(Component, {
...props,
routerData: routerDataCache,
});
});
},
loading: () => {
return <Spin size="large" className="global-spin" />;
},
});
};
数据操作在src/models/文件夹下新建一个js文件(对应routerConfig中的model),作为这个页面的model,用来定义该页面需要用到的数据,以及一些函数。在model中存在 namespace(命名空间,用来区分不同的页面之间的数据),state(该命名空间下的数据),effects(一些异步请求的api方法定义在这里),reducers(用来修改state的一些函数定义在reducers下)
model类似于mvc结构中控制器的角色,其中主要有五个配置项。
- namespace
- model 的命名空间,同时也是他在全局 state 上的属性,只能用字符串,不支持通过 . 的方式创建多层命名空间。
- state
- state的初始值,优先级低于传给 dva() 的 opts.initialState。
- reducers key/value 格式定义 reducer,用于处理同步操作,唯一可以修改 state 的地方。由 action 触发
- effects
- 以 key/value 格式定义 effect。用于处理异步操作和业务逻辑,不 直接修改 state。由 action 触发,可以触发 action,可以和服务 器交互,可以获取全局 state 的数据等等。
- subscrip
- 以 key/value 格式定义 subscription。subscription 是订 阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。在 app.start() 时被执行,数据源可以是当前的时间、服 务器的 websocket 连接、keyboard 输入、geolocation 变化、 history 路由变化等等。
在model中不直接书写发起请求的代码,而是将请求统一放在 /src/services/下,新建一个js文件,存储各种请求的函数,将这些函数暴露出去,在model中引用。
整体的一个运行流程如下:
-
进入页面,在页面的componentDidMount钩子函数中调用model的effect中的方法
-
该方法调用service文件夹下的统一管理的请求函数
-
获取到服务器返回值,在model的effect中拿到,并且调用model下的reducer
-
调用model的reducers对请求的数据进行处理,将model的state进行改变,页面自动进行渲染