antd pro 新增模块的步骤

阅读量：7092 次

发布时间：2019-06-28

本文共 2711 字，大约阅读时间需要 9 分钟。

index.js是整个项目的入口文件。

// 1. Initializeconst app = dva({  history: createHistory(),});// 2. Pluginsapp.use(createLoading());// 3. Register global modelapp.model(require('./models/global').default);// 4. Routerapp.router(require('./router').default);// 5. Startapp.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 dynamicconst 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 
    ;    },  });};

数据操作在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 路由变化等等。