Advanced Dva

深入聊 dva：支付宝前端架构方案

陈成 (花名：云谦)

蚂蚁金服

@sorrycc

杭州

@chenchengpro

http://slides.com/sorrycc/advanced-dva

此次分享包含：

为什么要有 dva (5m)
dva 简单介绍 (5min)
dva 最佳实践 (20m)
周边及工具 (5m)
dva@2.0 规划 (5m)

Let's
Get
Started!

PlainReact

Roof

Roof@0.5

Redux

Dva

应用架构历程

三步走

调研 Redux 和 MobX，确保方向不会错
出 redux 最佳实践
产出 dva，解决 redux 痛点

Redux

轻量级数据流方案，解决从 state 到 component 的单向数据流转问题
借助 Action 和 Reducer 实现可预测的 state 变更
社区活跃，丰富的扩展、调试方案
...

Redux 最佳实践

文：React + Redux 最佳实践

新的问题

非常多的库供选择
```
代码写哪里？是个问题
```
```
代码分散，影响专注力
```

一遍遍重复地写 showLoading 和 hideLoading

出错处理太繁琐，每个异步 saga 都要 try .. catch

项目太大了，我需要动态加载方案

Dva

Build redux application easier and better.

dva 架构图

Dva @ 蚂蚁金服

Dva 是什么

框架，而非类库
基于 redux, react-router, redux-saga 的轻量级封装
借鉴 elm 的概念，Reducer, Effect 和 Subscription
...

初印象

import dva from'dva';

// 1. 创建 dva 实例
const app = dva();

// 2. 装载插件 (可选)
app.use(require('dva‐loading')());

// 3. 注册 Model
app.model(require('./models/count'));

// 4. 配置路由
app.router(require('./router'));

// 5. 启动应用
app.start('#root');