DVA数据分层管理

分层的概念

前端和后端的分层概念是不同的，但有相似的地方。

后端的分层

服务器端一般分为 Controller,Service, Data Access 三层

• Controller：
  负责与用户直接打交道，渲染页面、提供接口等，侧重于展示型逻辑。
• Service:
  负责处理业务逻辑，供 Controller 层调用。
• Data Access:
  顾名思义，负责与数据源对接，进行纯粹的数据读写，供 Service 层 调用。

前端的分层

前端分为：Page,Model,Service

• Page
  负责与用户直接打交道：渲染页面、接受用户的操作输入，侧重于展示型交互性逻辑。
• Model
  负责处理业务逻辑，为 Page 做数据、状态的读写、变换、暂存等。
• Service
  负责与 HTTP 接口对接，进行纯粹的数据读写。

使用DVA进行数据分层管理

dva是基于 redux、redux-saga 和 react-router 的轻量级前端框架。
官网：https://dvajs.com/
首先，将dva引用进项目，由于我是用Umi构建的react项目。所以导入就变得非常简单了。
在config.js中配置

使用dva插件

export default {
    plugins:[
        ['umi-plugin-react',{
            //开启功能
            dva: true,
            antd:true
        }]
    ]
   }

创建model文件

接下来，创建model文件，在umi中，约定在src/models文件夹中定义model，所以，在 该文件夹下创建ListData.js文件：

export default { 
    namespace: 'list', 
    state: { 
        data: [1, 2, 3],
        maxNum: 3 
    }
   }

创建组件并使用dva处理model的数据

import React from 'react';
import { connect } from 'dva';


const namespace = 'list'

const mapStateToPros = (state) =>{
    return{
        dataList : state[namespace].data,
        maxNum : state[namespace].maxNum
    }
}

@connect(mapDispatchToProps)
class List extends React.Component{
   render(){
        return (
            <div>
                <ul>
                    {
                        //遍历
                        this.props.dataList.map((value,index)=>{
                            return <li key={index}>{value}</li>
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default List

流程说明：

1. umi框架启动，会自动读取models目录下model文件，即ListData.js中的数据
2. @connect修饰符的第一个参数，接收一个方法，该方法必须返回{}，将接收到 model数据
3. 在全局的数据中，会有很多，所以需要通过namespace进行区分，所以通过 state[namespace]进行获取数据
4. 拿到model数据中的data，也就是[1, 2, 3]数据，进行包裹{}后返回
5. 返回的数据，将被封装到this.props中，所以通过this.props.listData即可获取到 model中的数据

刚刚只是将数据展现出来，如果点击按钮，需要修改state的值，怎么操作呢？ 首先，在
model中新增reducers方法，用于更新state中的数据：

在model中新增reducers方法

export default { 
    namespace: 'list', 
    state: { 
        data: [1, 2, 3],
        maxNum: 3 
    },
    reducers:{
        //state是更新前的对象，只要state发生了改变 dom就会被重新渲染
        addNewData(state){
            let maxNum = state.maxNum+1;
            let list = [...state.data,maxNum];
            return {
                data:list,
                maxNum:maxNum
            }
        }
    }
  }

在组件中引用前面定义的方法

import React from 'react';
import { connect } from 'dva';


const namespace = 'list'

const mapStateToPros = (state) =>{
    return{
        dataList : state[namespace].data,
        maxNum : state[namespace].maxNum
    }
}

const mapDispatchToProps = (dispatch)=>{
    return {
        addNewData:()=>{
            dispatch({
                type:namespace + "/addNewData" //调用前面定义的修改数据的方法
            })
        }
    }
}

@connect(mapStateToPros,mapDispatchToProps)
class List extends React.Component{
    render(){
        return (
            <div>
                <ul>
                    {
                        //遍历
                        this.props.dataList.map((value,index)=>{
                            return <li key={index}>{value}</li>
                        })
                    }
                </ul>
                
                <button onClick={()=>{
                    this.props.addNewData()
                }}>
                    添加
                </button>
            </div>
        );
    }
}

export default List

梳理