dva通过model的概念来管理一个领域的模型，包含同步更新的state的reducer，处理异步逻辑的effects等。effects异步处理数据之后的数据，最终也是流向到reducer再去更改state。所以，在dva中，这种单向的数据流转，非常清晰。
在使用dva之前，先来搞清楚几个概念：state，reducer，effect，dispatch，action，以及它们之间的关系。
dva的一些基础知识点
1、state
state是model的状态数据，基本上是需要在业务组件中使用到的那些数据。更改state有个需要注意的地方，为了保证数据变化时候的可控性，每一次变更state都是返回一个全新的对象，而不能使用引用关系并更改state里面的某个值。因此，在reducer的方法中，每一个方法都是通过return的方式，返回一个全新的state对象。
updateStore:(state), action) => {
console.log(action.type) // '${namespance}/updateStore'
return {
...state,
...action.payload
}
}
2、reducer
type Reducer<S, A> = (state: S, action: A) => S
dva官网使用这种方式标明了reducer的参数，以及它的类型，插一句题外话，这种通过typescript的类型来作为参数的文档，貌似现在比较流行的方式。一些同事在看源码的时候，也喜欢跳转到ts的类型来查看参数。
reducer接受两个参数，state是当前运行时的model中的state，action中的payload携带了需要修改的数据，reducer通过纯函数的方式，返回一个完全新的state。
3、effect
因为一些异步操作传入同样的值可能返回的是不同的结果，因此，将异步请求的一些操作都统一放到了effect中来管理。effect在这里面就是副作用的意思。至于dva底层是如何将effect副作用转为纯函数的原因，我还没理解到。大概就是用了某些东西结合generator使它转变成了纯函数。因此，effects的方法前，一般都使用*结合yield的方式。
effects: {
*someEffect({ payload }, { call, put, select }) {
yield put({
type: 'updateStore',
payload: {
stateA: '新的值'
}
})
}}
4、action
action是一个对象，作为参数传递给dispatch或者put函数，它是唯一可以改变state的途径。通过action来标明当前的行为想要改变具体的model以及state的哪些内容，在我的项目中，我使用了以下命名的方式来更新store：
// 在model外面，通常是你的业务组件中，需要添加namespace命名空间来标明你想要更改哪个model中的state
dispatch({
type: '${namespace}/updateStore',
payload: {
stateA: '新的值'
}
})
// 在model内部，如effect中，通过put的方式
effects: {
*someEffect({ payload }, { call, put, select }) {// call, put, select这些参数的含义，还要查一下文档
yield put({
type: 'updateStore',
payload: {
stateA: '新的值'
}
})
}}
action中必须有type标明具体的行为。namespace对应具体要更改的model，‘updateStore‘对应的就是model文件中的reducer下的具体的行为。
5、dispatch
dispatch跟action通常是一起使用，action标明具体行为以及通过它会将state变成一个什么样的新的state，在业务组件中，靠dispatch方法来触发这个行为。
6、额外介绍个知识点，subscritions。
这个在官网里面描述的内容很少，之前用vue的时候也没有看到过类似的设计，所以官网看的不太懂，看完给人一种云里雾里的感觉，经过一通百度，看到大神的介绍，终于搞明白这个东西是用来干什么的了。先上一段代码看下，结合注释看完你就恍然大悟了，看不懂再看后面的文字。
subscriptions: {
onClick({dispatch}) => { // 这个onClick方法的命名是没有意义的，随意写，换成onClickkkk效果也是一样.当监听有变化的时候，会一次执行这里的代码
dispatch({
type: 'click',
payload: {} // 至于payload,你写不写看需求。
})
},
onHistoryChange({dispatch, history}) => {
history.listen((location) => {
console.log(location)
// xxx代码，你想dispatch或者啥都行
// xxx代码，你想dispatch或者啥都行
})
}
}
看到这里，再回去看官网的例子，是不是一下子就明白了？
官网摘录：Subscriptions 是一种从 源 获取数据的方法，它来自于 elm。Subscription 语义是订阅，用于订阅一个数据源，然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等
官网示例：
import key from 'keymaster';
...
app.model({
namespace: 'count',
subscriptions: {
keyEvent({dispatch}) {
key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
},
}
});
在umi项目中使用dva的方式如下：
umi创建的项目的src/models目录下，定义一个global.ts文件
global.ts对象export一个对象
// ts ，如果没有引入ts可以忽略
export type GlobalModelState = { projectInfo: Object};
// ts ，如果没有引入ts可以忽略
export type GlobalModelType = {
namespace: 'global';
state: GlobalModelState;
effects: {};
reducers: {};
};
const GlobalModel: GlobalModelType = {
namespace: 'global',
state: {
projectInfo: {}
},
effects: {},
reducers: {
updateStore: (state: any, { payload }: { payload: any }) => {
return {
...state,
...payload
}
}
},
};
注：updateStore接受的两个参数，一个是state，代表当前model中的state，另一个参数是action，也就是在业务组件中通过如下方式dispatch方法中的参数，包含一个type，一个payload。updateStore: (state: any, { payload }: { payload: any })此处涉及到了对象结构以及ts的类型定义，如果不是ts，直接updateStore(state, action) =>{} 即可
const mapDispatchToProps = (dispatch: any) => {
return {
updateProjectInfo: (projectInfo: any) => {
dispatch({
type: `${namespace}/updateStore`,
payload: {
projectInfo
}
})
}
}}
dva通过connect方法将model跟组件串联起来，使用方式如下：
// 业务组件.jsx
import { connect } from 'dva'
import React, {useState} from 'react'
const xxComp:React.FC = (props) => {
const { dispatch } = props
//
//
const doSomething = ()=> {
dispatch({
type: '${'global'}/updateStore' // 这里的global对应的是你要更新的namespace对应的model
payload: {
projectInfo: '新的projectInfo'
}
})
}
}
export default connect()(xxComp)
注：当通过conect将model与组件连接起来后，dispatch会自动注入到该组件的props中。
