dva值得一试

时间 2019-11-16

标签 dva 值得一试繁體版

原文原文链接

原文地址在个人博客, 转载请注明出处，谢谢！javascript

前言

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

概述

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

背景

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.....真的是很是复杂，容易出错。java

dva 是什么

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

确实,git

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

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

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

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架构思路清晰，代码书写方式固定，有利于团队合做，但可扩展性不强