ant-design-pro Notes(1)

做一下这两天学习ant-design-pro的笔记，还要继续挖几个月T^T

ant-design-pro是一个用来做后台界面的框架，集成了react,dva,antd
默认使用css-modules（把整个样式文件当做一个对象引入，使用时就像对象调用属性一样，className={styles.xxx}）

项目目录

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

整个目录看下来，比较重要的是这么几个部分

1. config/router.config.js页面相关的路由配置
   在menu中添加选项，并显示新页面，需要在pages中添加页面组件，然后在这个文件里添加路由信息,并且在locales/zh-cn/menu.js添加相应的数据

//router.config.js
··· ···
  routes: [
      // dashboard
      { path: '/', redirect: '/dashboard/analysis' },
      {
        path: '/dashboard',
        name: 'dashboard',
        icon: 'dashboard',
        routes: [
          {
            path: '/dashboard/analysis',
            name: 'analysis',
            component: './Dashboard/Analysis',
          },
         {
            path: '/dashboard/test',
            name: 'test',//需要和 menu.js中 key值的最后一级相同
            component: './Dashboard/Test',
          },
          {
            path: '/dashboard/monitor',
            name: 'monitor',
            component: './Dashboard/Monitor',
          },
          {
            path: '/dashboard/workplace',
            name: 'workplace',
            component: './Dashboard/Workplace',
          },
        ],
      },
··· ···
//locales/zh-cn/menu.js
  'menu.home': '首页',
  'menu.dashboard': 'Dashboard',//dashboard对应上面的name
  'menu.dashboard.analysis': '分析页',//analysis对应上面的name
  'menu.dashboard.test': '新菜单按钮新页面',//test对应上面的name
  'menu.dashboard.monitor': '监控页',//···
  'menu.dashboard.workplace': '工作台',//···

2. src/components通用的业务组件
   页面中需要用的antd-pro组件都从这里引入
   @/components/xxx（这里的@是相对于根目录）
3. src/models全局model

用来处理逻辑，就像redux的作用，只不过ant-design-pro是将一个大的状态管理器，分成了一个个小型的，毕竟不是每个页面都需要实现组件间的全局通信。

export default {
  namespace: 'xxxx',
  state: [],
  effects:{}
  reducers: {},
  subscribtions:{}
};

每个model.js包含5个部分
<1> namespace 命名空间，当前model的名字，和组件connect的时候用到
<2> state就是redux中的state，也只能通过reducer来改变
<3> effects这里的effect用来处理异步操作的，antd-pro封装了redux-saga，实现异步使用的是generator，状态函数的第一个参数是发送请求时携带的数据，第二个参数是一些字段，call用来处理异步操作，put相当于dispatch，select获取当前的state

 effects: {
    *fetch({ param }, { call, put, select }) {
      const data = yield call(requestData, param);//antd-pro封装了request，使用fetch发送请求
      yield put({
        type: 'firstChangeAction',
        payload: data,
      });

effect执行完，会以action的形式传给reducers
<4>reducers

reducers: {
//方法名就是effects里的type
    firstChangeAction(state, { payload }) {
      return {
        ...state,
        xxxx: payload,
      };
    },
   secondChangeAction(state, { payload }) {
      return {
        ...state,
        xxxx: payload,
      };
    }
  },

和redux里的reducers不同，这里是将每一个操作定义成一个方法，redux是写成switch的形式改变state
<5>subscribtions
用于订阅某些数据源，并根据情况 dispatch 某些 action

subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname }) => {
        if (pathname === '/user') {
          dispatch({ type: 'fetch' });
        }
      });
    },
  }

4. services
   整个项目所有的请求api都在这里