React dva 的使用

各大传送门:

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、调用阶段:

猜你喜欢

转载自www.cnblogs.com/CyLee/p/9287300.html