Dva JS

入门了那个很类似vuex用于react的redux，为了更好的使用它，DVA或许是一个很好的选择，于是针对DVA官方文档进行了以下总结

基于redux的架子: Dva = React-Router+Redux+Redux-saga
数据流向:

Models :

State:

• type State = any
• State表示model状态数据

Action:

• type AsyncAction = any
• Action是普通js对象,是改变state的唯一途径。
• 通过dispatch调用一个action从而改变数据
• action必须带有type属性指明具体行为

dispatch({ type:'add',})

dispatch函数:

• type dispatch = (a: Action) => Action
• 是一个用于触发action的函数
• 在dva中,connect Model 的组件通过props可访问到dispatch
• 需要注意的是dispatch是在组件connect Models以后通过props传入的

dispatch({
type: 'user/add', //如果在model外调用,需要添加namespace
payload:{}, //需传递的信息)}

Reducer:

• type Reducer<S,A> = (state: S, action:A) => S
• reducers聚合积累的结果是当前model的state对象。通过actions中传入的值与当前reducers中的值进行运算获得新的state

Effect:

• 副作用,最常⻅的是异步操作,同样的输入不一是获得同样的输出
• 底层引入redux-sagas做异步流程控制

Subscription:

• 一种从源获取数据的方法
• 订阅一个数据源,然后根据条件dispatch (派出)需要的action

app.model({
namespace: ‘count’,
subscriptions:{
keyEvent({dispatch}){key( key操作,() =>{ dispatch({ type:’ add’})})
}
}
})

Router :

• 通过浏览器提供的History API可监听浏览器URL变化,从而控制路由相关操作

import {Router,Routes} from ‘dva/router’
app.router( ({history}) =>
<Router history ={ history } >
<Route path =“/“ component={ HomePage} / >
<Router/>
)

connect方法:

• 一个函数,绑定State到View
• connect方法返回一个React组件,通常称为容器组件,是UI组件的容器,即在外包了一层state
• connect 方法传入的第一个参数是 mapStateToProps 函数,mapStateToProps 函数会返回一个对象,用于建立 State 到 Props 的映射关系。

//例:
import { connect} from ’dva’
function mapStateToProps(state){
return {todos:state.todos}
}
connect (mapStateToProps)(组件名)

一个简单完整的DVA

const app = dva( )
app.model({...})
app.router(( )=> <路由组件 />)
app.start(‘#root’)

Model对象属性:

• namespace:当前model名称,整个应用的state申多个Model的state以namespace为key合成
• state:该model当前状态
• reducers: Action处理器,处理同步动作,用来算出最新state
• effects:Action处理器,处理异步动作

Model例子

{
namespace: 'count',
state: 0,
reducers: {
add(state) { return state + 1 },
},
effects: {
*addAfter1Second(action, { call, put }) {
yield call(delay, 1000);
yield put({ type: 'add' });
},},
}

Effect:

是一个Generator函数,内部使用yield关键字,标识每一步操作(不管同步异步)

常用处理函数:

call:执行异步函数
put:发出一个action,类似dispatch