本篇博客适合个人笔记,描述用法,深入了解 dva 请自行查看文档
创建一个新的页面
src/pages
文件夹下创建一个新的页面,目录结构如下:
> Shipping
> components
> models
index.jsx
配置路由
config/config.js
中按照,pro 示例配置路由
状态管理的整个过程
这里指的是使用状态管理的整个思路,不是指代码的书写顺序,代码的书写过程应该是下面的倒序
第一步: @connect(() => ({}))
,添加在组件申明之前
这里我的习惯是把state
放在组件的中, 而没有放在model
中
如果把state
放在model
中,@connect(() => ({}))
中,就要接收model
中的state
第二步:每个事件都要向后端发送请求,每个事件都会触发dispatch
拿到dispatch
这个方法
const { dispatch } = this.props
dispatch
的使用
dispatch({
type: '[model文件名]/[effects中的方法]',
payload: [传递参数],
callback: res => {
// 拿到 effects 方法中 callback 传回来的数据,做相应处理,这里我主要是把数据更新到 组件的 state 中
this.setState({
...
})
}
})
第三步:model
文件
model
文件中的主体内容
export default {
namespace: '[对应文件名]',
state: {},
effects: {},
reducers: {
// 如果下面 effects 方法中用到 yield put()
// [对应方法](state, { payload }) { // 第一个参数为,初始 state;第二个参数为,effects 中传递过来的 payload
// ...
// return {
// [经过修改后的 state]
// }
// }
},
};
effects
方法
// 实例代码
*fetch({ payload, callback }, { call }) {
const res = yield call(query, 'shipping', payload);
// 如果 dispatch 有传过来一个 callback 的函数的话,调用这个 callback,把 res 作为参数传递,调用组件中的 callback
if (callback) callback(res);
// 这里为什么是如果?因为可以用另一种方法代替 callback 的使用,就是
// yield put({ type: [reducers 中的方法], payload})
},
effects
中的yield call()
import { [接口名] } from '@/services/api';
const res = yield call([接口名], '[接口参数]', payload); // 第三个参数为详细参数,对应 services 文件中的 params
第四步:services/api.js
文件
import request from '@/utils/request'; // 调用接口请求
import { stringify } from 'qs'; // 字符串转换
export async function [接口名](resource, params) { // 第一个参数,对用上面的 [接口参数]
return request(`/api/${resource}?${stringify(params)}`);
}
dva 异步获取接口数据的几种方式
主要介绍两种可法
传统的用法(callback)
*fetch({ payload, callback }, { call }) {
const res = yield call(query, '[resource]', payload)
if (res && callback) callback(res)
}
dispatch({
type: '[namespace]/fetch',
payload: {
page: 1,
},
callback: res => {
console.log(res)
}
})
优雅的写法(return)
*fetch({ payload }, { call }) {
const res = yield call(query, '[resource]', payload)
return res
}
dispatch({
type: '[namespace]/fetch',
payload: {
page: 1,
},
}).then(res => {
console.log(res)
})