Dva框架从初识到上手

引言

最近工作需要用dva框架，同事帮我培训了一下，有一点点认识，在此总结。

当然，以后对dva可能会了解更透彻，文章会不断更新的。

 

初识

开始看架构代码，没有看文档的时候，不知道里面的几个关键字是什么意思：

1. Effect
2. Reducer
3. Dispatch
4. mapStateToProps
5. NAMESPACE

一头雾水，感觉好复杂。听完同事讲解以后，觉得redux代码量好大。

虽然公司其他项目用的不是这个框架，但是最近项目需要，没办法，学呗！

关于dva

dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装;

数据流向： 数据的改变发生通常是通过：

用户交互行为（用户点击按钮等）
浏览器行为（如路由跳转等）触发的
当此类行为会改变数据的时候可以通过 dispatch 发起一个 action ，如果是同步行为会直接通过Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变State 。 所以在 dva 中，数据流向非常清晰简明，看最后思维导图。

关于Redux-saga

Redus-saga 是一个 redux 的中间件，主要用来简便而优雅的处理 redux 应用里的副作用（side effect相对于pure function这类概念而言的）。它之所以可以做到这一点主要是使用了ES6 里的一个语法： Generator 。使用 Generator 可以像写同步的代码一样编写异步代码，这样更加容易测试。（其实这里也不是特别懂，后面还要研究一下）

现在回头看（虽然才过去两天），感觉走了弯路。因为项目时间比较紧，同事跟我讲完，我想都没想，就按照他跟我说的逻辑，复制粘贴（在原来代码基础上），然后哪里报错修哪里。

后来越弄越搞不清楚。所以，拿到新东西，开始一定是看文档，看文档，看文档。

后来我看文档，把不懂的再确认一遍，看一下之前别人是怎么写的，然后从头开始写自己的任务：

1 添加路由（page）

2 添加布局以及组件

3 设计Model

4 connect关联

上手

下面根据以上四个步骤，我们来看一个用例

这个就是同事跟我讲解的时候写的，很清晰明了

step1：routes

这里没有写组件，如果有组件这里可以抽出来。

关于多层级组件传数据，我目前还不是完全明白，等后面搞明白了加上。

import React, { Component } from 'react'
import { connect } from 'dva'
import './index.less'
import { NAMESPACE } from '../../models/evaluateManage/constants';
import { Row , Col, Input, Button, Select } from 'antd'
const Option = Select.Option

const mapStateToProps = (state) => ({
    ...state[NAMESPACE],
    description: state[NAMESPACE].description,
    menuList: state[NAMESPACE].menuList,
})

const mapDispatchToProps = (dispatch) => ({
    dispatch,
    updateState(val, cb){
        dispatch({
            type:`${NAMESPACE}/updateState`,
            payload:{
                params: val,
                cb: cb
            }
        })
    },
    getMenu(val, cb){
        dispatch({
            type: `${NAMESPACE}/getMenu`,
            payload: {
                params: val,
                cb: cb
            }
        })
    }
})

@connect(mapStateToProps, mapDispatchToProps)
class EvaluateManage extends Component{

    constructor(props){
        super(props)
        this.state = {
            inputMsg: undefined
        }
    }
    syncMethod = () => {
        const { inputMsg } = this.state
        this.props.updateState({
            description: inputMsg
        }, (res) => {
            debugger
        })
    }
    asyncMethod = () => {
        this.props.getMenu({
            tenantId: "_1RNSq2S"
        })
    }
    asyncMethod = () => {
        this.props.getMenu({
            tenantId: "_1RNSq2S"
        })
    }
    asyncMethodCallback = () => {
        this.props.getMenu({
            tenantId: "_1RNSq2S"
        },(res = []) => {
            this.props.updateState({
                menuList: res,
                description: "通过回调机制"
            })
        })
    }

    inputMethod = (e) => {
        let value = e.target.value
        if(!value){
            value = "我是描述"
        }
        this.setState({
            inputMsg: value
        })
    }

    render(){
        const { inputMsg } = this.state
        const { menuList = [] } = this.props
        return <div styleName="rule-wrapper">
            <h1 styleName="ruleTitle">{this.props.description}</h1>
            <h1 styleName="ruleTitle">我是输入内容：{inputMsg}</h1>
            <Row>
                <Col span={24}>
                    <Input onChange={this.inputMethod} value={inputMsg}/>
                </Col>
            </Row>
            <Row>
                <Col span={8}>
                    <Button size="large" onClick={this.syncMethod}>我是同步按扭</Button>
                </Col>
                <Col span={8}>
                    <Button size="large"  onClick={this.asyncMethod}>我是异步按扭</Button>
                </Col>
                <Col span={8}>
                    <Button size="large"  onClick={this.asyncMethodCallback}>我是异步按扭回调机制</Button>
                </Col>
            </Row>
            <ul>
                {
                    menuList.map((item) => {
                        const { name, code} = item
                        return <li>{name}   {code}</li>
                    })
                }
            </ul>

        </div>
    }
}

export default EvaluateManage

　　inistate

const evaluateManage = {
    "description": "我是描述",
    "menuList": []
}

　　model

import * as constants from './constants'
import {initState} from "../initState";
import {apiCallTemplate} from 'Apis/api'

export const getMenu = apiCallTemplate('getMenu', constants.NAMESPACE)

export default {
    namespace: constants.NAMESPACE,
    state: initState[constants.NAMESPACE],
    reducers: {
        updateState(state, { payload }){
            const { params, cb } = payload
            cb && cb()
            return {
                ...state,
                ...params
            }
        }
    },
    effects: {
        *getMenu({ payload: {params = {},cb } }, { call, put}){
            const { data } = yield call(getMenu, params)
            const { menuList = [] } = data
            if(cb){
                cb(menuList)
            }else{
                yield put({
                    type: 'updateState',
                    payload: {
                        params: {
                            menuList,
                            description: "通过非回调机制"
                        }
                    }
                })
            }

        }
    },
    subscriptions: {},
}

　最终效果见下图

　　点击同步按钮

　　点击异步按钮，这里调了getMenu接口

异步和异步回调效果差不多的，后者多了回调

dva思维导图

写在最后

model中的reducers跟effects是负责修改状态state的方法，其中reducers是同步方法，effects是异步方法，reducers跟effects中的方法

组件中修改状态需要通过在Action中调用dispatch方法来调用reduces或effects中的方法来实现，

因此需要在组件中定义Action方法，页面根组件中的mapDispatchToProps里面负责定义Action，

所以在页面根组件中需要在mapDispatchToProps中定义操作reducers或effects的方法(action)

 

dva将所有与数据操作相关的逻辑集中放在一个地方处理和维护，在数据跟业务状态交互比较紧密的场景下，会使我们的代码更加清晰可控。

对于一个大型管理系统，由于要进行大量的数据操作，在设计model时将不同类型的业务需求数据操作分开处理，便于维护。

项目的开发流程一般是从设计 model state 开始进行抽象数据，完成 component 后，将组件和model 建立关联，通过 dispatch 一个 action ，在 reducer 中更新数据完成数据同步处理；

当需要从服务器获取数据时，通过 Effects 数据异步处理，然后调用 Reducer 更新全局 state 。

以上一个单向的数据流动过程。

解决了 redux 中代码分散和重写问题。

总之，Dva：Build redux application easier and better。

这里代码量确实比mobx的大，但这套框架也确实有可取之处。

阿里云主要用的语言是React，架构： Redux，框架：dva

备注：

react高阶组件学习

前端react迭代方向，尽量少用高阶组件，后期不好维护。多将组件细分，组件越小越好，类似乐高积木一样。

不过高阶组件还是要会运用。