新手理解Dva model

如果觉得文章不错,请关注公众号:Java开发高级进阶 ,感谢对博主的支持!

刚接触Dva对Dva的理念一点都不懂,看代码不知道为啥这里要这么写,于是我就百度了一下,找到了一片博客写的很通俗,对我帮助很大,在这里我将他的博客文章迁移过来了,给自己做了记录。

model.js:

model层一般包含几个部分:

namespace:model的名字,用来在页面中找到要调用哪一个model,就想id一样。
state: 用来存放数据的地方。
subscriptions:在我看来就是绑定监听页面的,只有进入监听的页面才会触发,且在当前页面只会触发一次 列如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
subscriptions: {

setup ({ dispatch, history }) {

history.listen((location) => {//监听

if (location.pathname === '/storeManage/storeInfo') {//当进入这个页面的时候,就会调用下面的dispatch方法。

dispatch({

type: 'add',

payload:

location.query.id,

})}})},},
reducers:方法,经常就是调用来把页面,后台传来的值存入到state中:列如:
1
2
3
4
5
6
7
8
9
reducers:{

addSuccess(state,{payload:value}){

return {...state,...value}

//把传的值存入到state中

},
effects:异步的方法调用 例如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
effects: {

//上面监听进入storeManage/storeInfo这个页面,就会调用add这个方法:{payload}这里传的指就是上面payload的值:location.query.id,

* add ({ payload,}, { call, put }) {

const data = yield call(add, payload)

//yield call(add, payload) 异步请求,向add接口发出请求,传参为payload的值,data可以接受到后台传来的数据

if (data.code==200) {

//如果后台返回的状态码为200,就会执行,addSuccess方法,上面已经说了是把值传入到state中,这里就把后台请求到的数据data赋值给list 存入了state中,那样就可以在页面中通过调用state值获取到后台的数据了

yield put({

type: 'addSuccess',

payload: {

list:data

},

})

} else {

throw data

}

}

},

#####如果要在effects中对于param数据和当前的state数据进行再出处理,这里怎么获取state呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default {

namespace: 'example',

state: {
num:1,
commandSet:{}
}, //表示当前的example中的state状态,这里可以给初始值,这里num初始为1

effects: { //这里是做异步处理的

* addByONe({ param }, { call, put,select }) {

const num = yield select(state => state.num) //这里就获取到了当前state中的数据num
const { commandSet } = yield select(state => state.example);
}
}
}

作者:Zeng亦
来源:CSDN
原文:https://blog.csdn.net/zeng__yi/article/details/83211070