antd-pro：简单的使用dva
前言
之前简单的写了对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 (
用户名:{name}
当前时间：{time}
);
};
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 (
用户名:{name}
当前时间：{time}
);
};
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 (
用户名:{name}
当前时间：{time}
);
};
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 (
用户名:{name}
当前时间：{time}
);
};
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 所用的 keystate
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！！！！！！！