新手理解Dva model

发表于 | 阅读次数:

刚接触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