1、src/routes 中新建一个最简单的页面组件 Ruirui
2、src/common/router 中新建一个不需要新 layout 的路由（这样就可以依托于pro初始化已经建好的layout组件），比如：
'/dashboard/ruirui': {
component: dynamicWrapper(app, ['ruirui'], () => import('../routes/Ruirui')),
},
此处的 '/dashboard/ruirui' 是路由url页面地址，
'ruirui'指的是与页面一起加载的 model ，
import('../routes/Ruirui') 自然指的就是页面组件了。
3、src/models 中新建一个 model ，名叫 ruirui （就是第二步中与页面一起加载的），内容如下：
import { queryInterests } from '../services/api';
export default {
namespace: 'ruirui',//全局state名称，要独一无二，会在页面组件的 connect 中使用
state: {
interests: [],//会在页面中类似这样使用 this.props.ruirui.interests
},
effects: {
*queryInterests(_, { call, put }) {//这里的 queryInterests 是在页面组件的 dispatch 中使用的
const response = yield call(queryInterests);//这里的 queryInterests 是调用的api接口
yield put({
type: 'interestsSuccessful',//能匹配到下方 reducers 中的任意一个方法
payload: response,
});
},
},
reducers: {
interestsSuccessful(state, action) {
return {
...state,
interests: action.payload,
};
},
},
};
4、第三步中的 queryInterests api接口实际上我们还没有创建，现在去创建
进入 src/services/api ,新增接口内容如下：
export async function queryInterests() {
return request('/api/interests');
}
这里的 '/api/interests' 是什么？请看第五步。（如果你需要请求后台接口，就直接请求接口，不需要第五步）
5、先在 mock 文件夹中增加 interests 文件，文件写入如下内容：
export const getInterests = (req, res) => {
res.json(['看电影','读书','天马行空','做梦','学习不会的事情']);
};
export default {
getInterests,
};
然后进入 根目录的 .roadhogrc.mock.js 文件，增加：
import { getInterests } from './mock/interests';
并在 proxy 中增加
GET /api/interests': getInterests,
6、最后，我们进入页面组件Ruirui 去请求数据，内容如下：
import React, { Component } from 'react';
import { connect } from 'dva';
@connect(({ ruirui, loading }) => ({//将 routers 中设置的页面组件和 model 真正的关联起来，请注意与namespace名称一致！
ruirui,
loading: loading.models.monitor,
}))
export default class Ruirui extends Component {
componentDidMount() {
this.props.dispatch({
type: 'ruirui/queryInterests',
});
}
render() {
const {interests} = this.props.ruirui;
console.log( interests );
return (
<div>
Ruirui
</div>
);
}
}
总结：
1、一个页面可以使用多个 model ，一个 model 可以被多个页面使用，他们是多对多的关系。
2、页面绑定 model 时，请注意 connect 中参数的名称与 namespace 保持一致。
