前言

之前简单的写了对antd-pro的构建以及运行，并未对antd-pro等进行过多的描述，也不打算，毕竟官网会给出答案，个人奉承‘洞其万理，致之一用’，接下来就大概的讲解怎么更好的使用umi/dva/antd的特色

序言

在一个项目中，状态管理始终是最重要的，如同面试时候，vuex/react-redux/redux三者是必定问及的。而在单页面应用中，状态管理也是必须的，所以，我们也有必要学会使用dva

正文

改造一个空白的页面

为了不浪费篇幅去写如何在antd中创建一个新的页面，因为个人感觉这个是比较方便的，
不太需要花费篇幅去描述，或则在后期，再写一个博客去描述，
所以直接改动下面的文件夹中的文件

import { connect } from 'dva';
import { Button } from 'antd'
import React from 'react';
/*
点击事件
*/

const TableList = props => {
  const handleClick = async () => {
    const { dispatch } = props;
    dispatch({
      type: 'test/effectTime'
    })
  }
  const {
    name, time
  } = props;
  return (
    <div>
      <div>用户名:{name}</div>
      <div>当前时间：{time}</div>
      <Button type='primary' onClick={() => { handleClick() }}>更新当前时间</Button>
    </div>

  );
};

export default connect(({ test }) => ({
  time: test.time,
  name: test.name
}))(TableList);

修改model/xxx.js文件

这回为了不影响原有的功能，直接在所示的地方创建了一个test的文件，顾名思义是测试的

const test = {
  namespace: 'test',
  state: {
    time: +new Date(),
    name: 'mkmin'
  },
  reducers: {
    reducerTime(state, action) {
      const { time } = action.payload;
      return { ...state, time }
    }
  },
  effects: {
    *effectTime(_, { call, put }) {
      const time = yield call(getnumber);
      yield put({
        type: 'reducerTime',
        payload: {
          time
        }
      })
    }
  },
  subscriptions: {
    changeTime({ dispatch, history }) {  // 这里的方法名可以随便命名，当监听有变化的时候就会依次执行这的变化,
      window.onclick = () => {
        console.log("页面被点击了");
      }
    },
  }
}
export default test;
async function getnumber() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(+new Date());
    }, 3000);
  })
}

效果

先给各位大佬看完页面的效果再仔细的去描述

流程解说

1.搭建一个简单至极的静态页面，使用hook+js的写法

import { Button } from 'antd'
import React, { useState } from 'react';
/*
点击事件
*/

const TableList = props => {
  const [time] = useState(+new Date())
  const [name] = useState('mkmin');
  const handleClick = async () => {

  }

  return (
    <div>
      <div>用户名:{name}</div>
      <div>当前时间：{time}</div>
      <Button type='primary' onClick={() => { handleClick() }}>更新当前时间</Button>
    </div>

  );
};

export default TableList;

2.构建我们的dva文件，并且绑定到component上去

component文件

import { connect } from 'dva';
import { Button } from 'antd'
import React from 'react';
/*
点击事件
*/

const TableList = props => {
  const handleClick = async () => {

  }
  const {
    name, time
  } = props;
  return (
    <div>
      <div>用户名:{name}</div>
      <div>当前时间：{time}</div>
      <Button type='primary' onClick={() => { handleClick() }}>更新当前时间</Button>
    </div>

  );
};

export default connect(({ test }) => ({
  time: test.time,
  name: test.name
}))(TableList);

model/xxx.js文件

const test = {
  namespace: 'test',
  state: {
    time: +new Date(),
    name: 'mkmin'
  },

}
export default test;

3.在model/xxx文件中添加reducers以及effects，并且在component上触发

model/xxx.js

const test = {
  namespace: 'test',
  state: {
    time: +new Date(),
    name: 'mkmin'
  },
  reducers: {
    reducerTime(state, action) {
      const { time } = action.payload;
      return { ...state, time }
    }
  },
  effects: {
    *effectTime(_, { call, put }) {
      const time = yield call(getnumber);
      yield put({
        type: 'reducerTime',
        payload: {
          time
        }
      })
    }
  },

}
export default test;
async function getnumber() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(+new Date());
    }, 3000);
  })
}

component.jsx

import { connect } from 'dva';
import { Button } from 'antd'
import React from 'react';
/*
点击事件
*/

const TableList = props => {
  const handleClick = async () => {
    const { dispatch } = props;
    dispatch({
      type: 'test/effectTime'
    })
  }
  const {
    name, time
  } = props;
  return (
    <div>
      <div>用户名:{name}</div>
      <div>当前时间：{time}</div>
      <Button type='primary' onClick={() => { handleClick() }}>更新当前时间</Button>
    </div>

  );
};

export default connect(({ test }) => ({
  time: test.time,
  name: test.name
}))(TableList);

4.model/xxx.js中添加订阅事件

const test = {
  namespace: 'test',
  state: {
    time: +new Date(),
    name: 'mkmin'
  },
  reducers: {
    reducerTime(state, action) {
      const { time } = action.payload;
      return { ...state, time }
    }
  },
  effects: {
    *effectTime(_, { call, put }) {
      const time = yield call(getnumber);
      yield put({
        type: 'reducerTime',
        payload: {
          time
        }
      })
    }
  },
  subscriptions: {
    changeTime({ dispatch, history }) {  // 这里的方法名可以随便命名，当监听有变化的时候就会依次执行这的变化,
      window.onclick = () => {
        console.log("页面被点击了");
      }
    },
  }
}
export default test;
async function getnumber() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(+new Date());
    }, 3000);
  })
}

备注

1.在model/xxx.js中，reducer常用于更改我们的state，

2.在model/xxx.js中，effects用于异步操作，比如代码中写的异步返回（模拟调用接口）

3.在页面中用connect去与models/xxx.js产生关系

4.将modes/xxx.js中的state放置在页面上的方法与redux差不多，

5.多看文档！！！！！多做测试！！！！

dva模块解说

namespace

namespace 是 model state 在全局 state 所用的 key

state

state是默认数据  

reducer

reducer 是唯一可以更新 state 的地方，是一个纯函数，接收参数 state 和 action，返回新的 state，基本是在effects中调用
reducers：{
minus(state) {
     return { ...state, current: state.current - 1};
   }
}

connect

function mapStateToProps(state) {
  return { count: state.count };
}
const HomePage = connect(mapStateToProps)(CountApp);

effects

异步请求
effects: {
   *add(action, { call, put }) {
     yield call(delay, 1000);//调用另外的effects
     yield put({ type: 'minus' });//调用另外的reducer
   },
 },
在component中去触发
this.props.dispatch({ type: 'count/add1' });

subscriptions

订阅事件
setup({ dispatch, history }) {  // 这里的方法名可以随便命名，当监听有变化的时候就会依次执行这的变化,
      window.onresize = () => {   //页面上触发onsize方法的时候回触发这个事件，
        dispatch (type:"save")  
      }
    },

​后

多看文档！！！！！！这个只是简单的demo！！！！！！！