DVA框架详解-CSDN博客

本篇博客适合个人笔记，描述用法，深入了解 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)
})