Advanced Dva

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

陈成 (花名:云谦)

蚂蚁金服

杭州

此次分享包含:

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

Let's
Get
Started!

PlainReact

Roof

Roof@0.5

Redux

Dva

应用架构历程

三步走

Redux

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

Redux 最佳实践

新的问题

  • 非常多的库供选择
  • 代码写哪里?是个问题
  • 代码分散,影响专注力
  • 一遍遍重复地写 showLoadinghideLoading
  • 出错处理太繁琐,每个异步 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');

特性

  • 仅有 5 个 API

  • 支持 HMR

  • 支持 SSR (ServerSideRender)

  • 支持 Mobile/ReactNative

  • 支持 TypeScript

  • 支持路由和 Model 的动态加载

  • 完善的语法分析库 dva-ast

  • ...

dva 最佳实践

Hooks and Plugins

  • onError(fn, dispatch)
  • onAction(fn | fn[])
  • onStateChange(fn)
  • onReducer(fn)
  • onEffect(fn)
  • onHmr(fn)

错误捕获

全局

局部

错误触发

Effect 里的逻辑错误

call Promise,然后 Promise reject

用例编写

进阶 saga effect

请求的并发、串联和取消

高级 redux 概念

  • onAction,引入额外的中间件
  • extraReducers,配置 model 外的 reducer,可与 redux-form 配合使用
  • extraEnhancers,配置 store enhancer,可与 redux-persist 配合使用
  • onReducer,配置 reducer enhancer,可实现 redo/undo

周边工具

redux devtool

dva v2

相关资源

Thank you!

Advanced DVA

By sorrycc

Advanced DVA

dva: react application arch in ant financial

  • 13,657