引言
最近工作需要用dva框架，同事帮我培训了一下，有一点点认识，在此总结。
当然，以后对dva可能会了解更透彻，文章会不断更新的。
初识
开始看架构代码，没有看文档的时候，不知道里面的几个关键字是什么意思：
- Effect
- Reducer
- Dispatch
- mapStateToProps
- 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迭代方向，尽量少用高阶组件，后期不好维护。多将组件细分，组件越小越好，类似乐高积木一样。
不过高阶组件还是要会运用。