快速上手 DVA

React-DVAJS

什么是DVAJS

首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

　　扩展：什么是redux 

　　官方解释：redux 是 js 应用的可预测状态的容器。 可以理解为全局数据状态管理工具（状态管理机），用来做组件通信等。

　　注意  是全局数据状态管理工具

　　为什么使用redux

我们将上图的一个圆圈看做是一个组件，可以看到他们都有顶级组件，组件之下还嵌套了组件，还有各种兄弟组件，他们之间都要进行数据的交互，

在没有redux的时候，如果是左图，我们现在的实现方式是什么样的呢，通过组件传值，但这种方式，传值会非常复杂，麻烦，而且代码冗余，尤其后期维护困难。基础稍差的前端来维护，或者换一个人来维护可能直接维护不了。

但如果使用了redux ，如右图，不管有多少组件，使用的都是同一个源，维护简单，传值方便，只需要稍有基础的，都可以快速上手，维护简单。而本文中所说的dvajs 就是在redux的基础上扩展的一个轻量级框架。

dva特性

1. 易学易用，仅有6个api，配合 umi 使用后更是降低为 0 API
2. elm 概念，通过 reducers, effects 和 subscriptions 组织 model
3. 插件机制，比如 dva-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading
4. 支持 HMR，基于 babel-plugin-dva-hmr 实现 components、routes 和 models 的 HMR

快速上手

我实际工作中使用的是阿里的andt框架 这里就直接安装使用现成的了。

1 新增页面

export default class Workplace extends PureComponent {
  render() {
    const columns1 = [
      {
        title: '商品名称',
        dataIndex: 'mobile'
      }
    ];

    return (
      <div >
        <Table columns={columns1} />
      </div>
    );
  }
}

2 定义model

export default {
    namespace: 'dvatest',

    state: {
        // 会员
        data: [],
        currentPage:1,
        pageSize:10,
        totalCount:0
    },

    effects: {
      
    },

    reducers: {
        
    },
};

这个 model 里：

• namespace 表示在全局 state 上的 key
• state 是初始值，在这里是空数组
• reducers 等同于 redux 里的 reducer，接收 action，同步更新 state

 

connect 

connect方式有很多种说我们这里都讲下，因为我发现在实际工作中有人因为不会使用connect而放弃使用dva，使用原始的组件传值。

第一种 使用@connect

import { connect } from 'dva';

@connect(({ dvatest, loading }) => ({
  dvatest,
  loading: loading.models.dvatest,
}))
export default class Workplace extends PureComponent {

｝

第二种

import { connect } from 'dva';

class Workplace extends PureComponent {

｝

export default connect(({ workplace }) => ({
  workplace ,
}))(Workplace );

第三种

const TestComponent = connect(({ dvatest, loading }) => ({
    dvatest,
    loading: loading.models.dvatest,
}))((props)=>{
    return (<div>我是一个react函数组件</div>)
})

model增加数据交互方法

　　　dvaTestService 是andt 与后台交互的，可以自行了解下或者用其他方式替代

import { CustomerList } from '@/services/dvaTestService.js';

export default {
    namespace: 'dvatest',

    state: {
        // 会员
        data: [],
        currentPage:1,
        pageSize:10,
        totalCount:0
    },

    effects: {
        //获取数据集详情
        *CustomerList({ payload }, { call, put }) {
            const response = yield call(CustomerList, payload);
            if (response.success) {
                yield put({
                    type: 'saveCustomer',
                    payload: response.response,
                });
            }
        }
    },

    reducers: {
        saveCustomer(state, { payload }) {
            return {
                ...state,
                data:payload.data,
                currentPage:payload.currentPage,
                pageSize:payload.pageSize,
                totalCount:payload.totalCount
            }
        }
    },
};

页面使用dva

class Workplace extends PureComponent {
　// 页面初始化 使用connect后 就可以 使用 this.props.dvatest 访问model中的数据 dvatest 为model的名称 即 namespase
  componentDidMount() {
    const { currentPage, pageSize } = this.props.dvatest;
　　 // 使用this.props.dispatch调用model方法
    this.props.dispatch({
      type: 'dvatest/CustomerList',
      payload: { page: currentPage, limit: pageSize }
    });
  }

  render() {
    const columns1 = [
      {
        title: '商品名称',
        dataIndex: 'mobile'
      }
    ];

    console.log(this.props.dvatest)
    const { data } = this.props.dvatest;


    return (
      <div >
        <Table columns={columns1} dataSource={data} />
      </div>
    );
  }
}

export default connect(({ dvatest, loading }) => ({
  dvatest,
  loading: loading.models.dvatest
}))(Workplace);

以上一个完成的 dva使用流程 就结束了