React dva 的使用

Posted 2020-12-03 cylee

各大传送门：

DvaJS Github

DvaJS API与示例

 

了解 dva
- dva = React-Router + Redux + Redux-saga + fetch

- dva的初衷是（其实应该是redux的初衷）。提供一个公共的顶层的状态管理工具，专门为view层服务（实现双向数据流），而让react只专注专心负责渲染view层。

 

dva项目入口初始化

在初始化的时候，指定使用的路由模式，这里使用了hash模式。

import dva from ‘dva‘;
import createHistory from ‘history/createHashHistory‘;
// user BrowserHistory
// import createHistory from ‘history/createBrowserHistory‘;

// 1. Initialize
const app = dva({
  history: createHistory(),
});

 

 

dva的几个规则:
1、通过dispatch调用namespace/effects
2、state(状态)
3、effects (异步操作)

- 函数必须带*，也就是生成器。
- 第一个参数，可以拓展为{payload, callback}
- 第二个参数，call和put
- call 就是调用 async的action函数
- put就是调用reducers的函数来更新state。

4、reducers

5、dva是以model为单位的，所有的应用逻辑都在上面

 

简而言之总结一下吧。开发dva分为两个阶段：
1、准备阶段：

- 定义 state 状态，用以绑定到 view 层；
- 定义 effects

- call用来调用 action，类似dispatch
- put用来调用reducers

- 定义 sync action 函数，用来进行异步请求；
- 定义 reducers 函数，用来更新 state。

2、调用阶段：