ant-design-pro 记录

ant-design-pro 记录

代理到正式服务器

/config/config.js

 proxy: {
      '/server/api/': {
      target: 'https://preview.pro.ant.design/',
      changeOrigin: true,
      pathRewrite: { '^/server': '' },
   },
 },

route中获取数据

import { connect } from `dva`导入dva框架

@connect(state => ({
  problem: state.problem,
  user: state.user,
}))
//--------------------------------
@connect(({ rule, loading }) => ({
  rule,
  loading: loading.models.rule,
}))

@connect是标准的装饰器写法
是redux封装出来的
操作是将models中的state中指定参数绑定到props中
loading 的来源是 src/index.js 中调用的 dva-loading插件。

dispatch -> models -> services 数据流程

• page 中有dispatch访问

const { form, dispatch } = this.props;
   dispatch({
     type: 'rule/fetch',
     payload: {},
   });

model 对象

• models 中 effects内的请求
• model中effects（处理异步逻辑）reducers（处理同步逻辑）
• namespace: 当前 Model 的名称。整个应用的 State，由多个小的 Model 的 State 以 namespace 为 key 合成
• state: 该 Model 当前的状态。数据保存在这里，直接决定了视图层的输出
• reducers: Action 处理器，处理同步动作，用来算出最新的 State
• effects：Action 处理器，处理异步动作

 import { queryRule, removeRule, addRule, updateRule } from '@/services/api';

export default {
  namespace: 'rule',

  state: {
    data: {
      list: [],
      pagination: {},
    },
  },

  effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(queryRule, payload);
      yield put({
        type: 'save',
        payload: response,
      });
    },
  },

  reducers: {
    save(state, action) {
      return {
        ...state,
        data: action.payload,
      };
    },
  },
};

• services
  services 提供最终服务？

• componentWillMount 将要装载，在render之前调用；

  componentDidMount，（装载完成），在render之后调用
  

• componentWillMount 每一个组件render之前立即调用；

  componentDidMount  render之后并不会立即调用，而是所有的子组件都render完之后才可以调用
  

• componentWillMount 可以在服务端被调用，也可以在浏览器端被调用；

  componentDidMount  只能在浏览器端被调用，在服务器端使用react的时候不会被调用
  

数据在render完毕后调用componentDidMount，调度读取

dva 的概念

• State：一个对象，保存整个应用状态
• View：React 组件构成的视图层
• Action：一个对象，描述事件
• connect 方法：一个函数，绑定 State 到 View
• dispatch 方法：一个函数，发送 Action 到 State
• Dvajs 官方文档

登录模块中routerRedux重定向

yield put(routerRedux.replace(redirect || '/'));
其实就是重定向命令，有redirect重定向到redirect路径 没有就重定向到 / 路径下