dva值得一试

原文地址在我的博客, 转载请注明出处，谢谢！

前言

使用React技术栈管理大型复杂的应用往往要使用Redux来管理应用的状态，然而随着深度使用，Redux也暴露出了一些问题。如编写页面配套（action、reducer）过于繁琐、复杂，组件之间耦合较深、不够扁平化、调用action creator发起动作破坏action纯洁性且必须层层传递等。这些缺点迫使使用Redux的人开始探索好的架构方式，解决或减轻使用Redux的问题。业界标杆阿里为此推出了dva 和 Mirror两种改良Redux的架构方案，不过这两者类似，本文就介绍一下dva。

概述

本文介绍了dva的产生背景，dva是什么，用来做什么，解决了什么问题，使用场景，原理，实践以及我的使用心得。

背景

Redux 文档中介绍，我们需要编写页面的action creator来提交，需要写reducer来更新state，最好对action 和 reducer 做页面为单位的分割，利用redux 给的API 构建容器组件包裹父组件来connect store拿到数据，然后再向下传递给functional component 来渲染，整个过程就实现了单向数据流。当应用复杂起来，一般的做法是配合react-router 做页面分割，光这个分割，你就得 做redux store 的创建，中间件的配置，路由的初始化，Provider 的 store 的绑定，saga 的初始化，还要处理 reducer, component, saga之间的联系...这个没办法，Redux就这么复杂；但是每个页面下要有自己对应的action、reducer，一般还会有saga，这样的话每个页面下都要有四五个文件目录（还有components、containers），每个文件目录下估计还要有不同功能的action、reducer、saga...如果这能忍的话，你在组件里发起action有两个方案，第一：调用经过层层传递的action creator 或者 sagas，第二，让saga监听action，再在组件里直接dispatch相应action类型就行了，不用层层传递，但是得提前 fork -> watcher -> worker.....真的是非常复杂，容易出错。

dva 是什么

dva名字取自游戏守望先锋里的一个驾驶机甲的韩国英雄叫dva，大概含义就是Redux的机甲吧...

确实,

dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，没有引入任何新概念，全部代码不到 100 行。( Inspired by elm and choo. )

dva 帮你自动化了Redux 架构一些繁琐的步骤，比如上面所说的redux store 的创建，中间件的配置，路由的初始化等等,没有什么魔法，只是帮你做了redux + react-router + redux-saga 架构的那些恶心、繁琐、容易出错的步骤，只需写几行代码就可以实现上述步骤，它解决了背景所说的所有缺点。dva介绍

此外，dva重要的特性就是把一个路由下的state、reducer、sagas 写到一块了，清晰明了

app.model({
  namespace: 'products', //分割的路由，对应要combine到root Reducer里的名字，这里就是state.products
  state: {  //这个路由下初始state
    list: [],
    loading: false,
  },
  subscriptions: [  //用来监听路径变化，这里就是当路由为products时dispatch一个获取数据的请求
    setup({ dispatch, history }) {
      return history.listen(({ pathname }) => {
        if (pathname === 'products') {
          //dispatch({ type: 'getUserInfo', payload: {} });
        }
      });
    },
  },
  ],
  effects: { //saga里的effects，里面的各种处理异步操作的saga
    ['products/query']: function*() {
      yield call(delay(800));
      yield put({
        type: 'products/query/success',
        payload: ['ant-tool', 'roof'],
      });
    },
  },
  reducers: {  // reducers 
    ['products/query'](state) {
      return { ...state, loading: true, };
    },
    ['products/query/success'](state, { payload }) {
      return { ...state, loading: false, list: payload };
    },
  },
});

dva的思想

官方文档

dva就是把之前Redux每个路由下的state、reducer、sagas写到一块去了，做了写到一块去也能做到以前redux能做的事，并且让思路变得很清晰 ：

每个路由下都有一个model，这个model掌管这个路由的所有状态（action、state、reducer、sagas），组件想改变状态dispatch type名字就行了。

实践

搞懂框架的脚手架是快速上手这个框架的一个好方法，下面是dva-cli

项目架构

.
├── src                    
    ├── assets             # 图片、logo
    ├── components         # 公用UI组件
    ├── index.css          # CSS for entry file
    ├── index.html         # HTML for entry file
    ├── index.js           # 入口文件
    ├── models             # 这里存放的就是上面说的dva的model，最好每个路由一个model
    ├── router.js          # 路由文件
    ├── routes             # 路由组件，跟Redux相同
    ├── services           # 每个页面的services，通常是获取后端数据的接口定义
    └── utils              # 存放一些工具
        └── request.js     # 这里封装一个用来与后端通信的接口
├── .editorconfig          #
├── .eslintrc              # Eslint config
├── .gitignore             #
├── .roadhogrc             # Roadhog config
└── package.json           #

按照dva的架构，每个路由下都有个model层，在model定义好这个路由的initialstate、reducers、sagas、subscriptions；然后connect组件，当在组件里发起action时，直接dispatch就行了，dva会帮你自动调用sagas/reducers。当发起同步action时，type写成'(namespace)/(reducer)'dva就帮你调用对应名字的reducer直接更新state，当发起异步action，type就写成'(namespace)/(saga)',dva就帮你调用对应名字的saga异步更新state，非常方便：

在组件里：

  ...
  const { dispatch } = this.props
  dispatch({
    type: 'namespace/sagas', //这里的type规范为model里面定义的namespace和effects下面定义的sagas或者    
    payload: {               // reducers,这样就能实现自动调用这些函数
      ...
    }
  })

注意，dispatch用来更新state某个数据后，下一步从state拿到的这个数据并不是更新后的：

...
  const { dispatch, data } = this.props
  dispatch({
    type: 'namespace/sagas', //这里的type规范为model里面定义的namespace和effects下面定义的sagas或者    
    payload: {               // reducers,这样就能实现自动调用这些函数
      data      //这里想更新data
    }
  })
  console.log(data) // 仍然是之前的数据，并不是dispatch更新后的数据
                      // 因为dispatch是异步的，如同React的setState后面打印state

此外，由于不用层层传递action creator，mapDispatchToProps就不用再写了，组件之间的耦合度也降低了，或者说根本没有关系了，dva使组件之间的关系变得更加扁平化,没有什么父子、兄弟关系，这样组件就具有很高的可重用性。所有需要在组件里通信的数据都要放在state中，然后connect组件，只拿到组件关心的数据，就像这样：

class App extends Component {
  ...
}
 
function mapStateToProps(state) {
  const {
    data
  } = state.user;  // user 对应namespace
  const loading = state.loading.effects['user/fetch'];
  return {
    data,
    loading
  };
}
export default connect(mapStateToProps)(User);

这样写，除了具有很高的重用性，也避免了父组件更新，子组件也会随之更新的缺点了！只要这个组件关心的数据没变，它就不会重新渲染，省掉了重写shouldComponentUpdate来提高性能，逻辑也变得清晰、简单起来！

另外，model下有个subscriptions用于订阅一个数据源，可以在这里面监听路由变化，比如当路由跳转到本页面时，发起请求来获取初始数据：

subscriptions: {
    setup: ({ history, dispatch }) => history.listen(({ pathname, query }) => {
      if (pathname === '/user') {
        dispatch({
          type: 'fetch',
          payload: {
            query
          }
        });
      }
    }),
  },
};

问题

使用没多久，了解较浅，暂时没发现什么问题

总结

dva框架封装了Redux 架构一些繁琐、复杂的步骤和常用库，使用dva，不会构建Redux架构也可以，dva帮你做好了;

dva 降低了组件之间的耦合度，没有父子、兄弟组件的关系，提高了组件可重用性以及渲染性能，使思路变得简单清晰；

dva架构思路清晰，代码书写方式固定，有利于团队合作，但可扩展性不强