說(shuō)在前面
- 關(guān)于redux的框架有很多猜丹，這里我用到的是阿里云謙大大的dva(項(xiàng)目地址),這里主要記錄下工作中是如何使用dva來(lái)異步獲取接口數(shù)據(jù)的。
- 文末更新至20190619
更新（2019.0619）
- 最近發(fā)現(xiàn)這篇文章雖然寫(xiě)的很爛硅卢，但是很多人都能搜到進(jìn)來(lái)瞅兩眼射窒，想著再更新一點(diǎn)吧。主要補(bǔ)充一下
dva的幾個(gè)關(guān)鍵詞的作用
state的作用
- State 表示 Model 的狀態(tài)數(shù)據(jù)将塑，通常表現(xiàn)為一個(gè) javascript 對(duì)象（當(dāng)然它可以是任何值）脉顿；操作的時(shí)候每次都要當(dāng)作不可變數(shù)據(jù)（immutable data）來(lái)對(duì)待，保證每次都是全新對(duì)象点寥，沒(méi)有引用關(guān)系艾疟，這樣才能保證 State 的獨(dú)立性，便于測(cè)試和追蹤變化敢辩。
- 在每一個(gè)
model中定義state蔽莱，用于分模塊管理全局狀態(tài)
effects的作用
- 進(jìn)行異步操作的地方(ajax...)，底層引入了
redux-sagas做異步流程控制戚长，由于采用了generator的相關(guān)概念盗冷，所以將異步轉(zhuǎn)成同步寫(xiě)法 - 類(lèi)似于
vuex中的Action,包含異步操作，在vuex中用于提交mutation同廉，從而變更state仪糖，在dva中用于提交reducer,用于修改state
Reducer的作用
- 同步方法柑司，唯一可以修改
state的地方，通過(guò)effect通過(guò)actions傳入的值修改state - 類(lèi)似于
vuex中mutation锅劝。
Subscription的作用
- 訂閱一個(gè)數(shù)據(jù)源攒驰，然后根據(jù)條件 dispatch 需要的 action。數(shù)據(jù)源可以是當(dāng)前的時(shí)間故爵、服務(wù)器的 websocket 連接玻粪、keyboard 輸入、geolocation 變化稠集、history 路由變化等等奶段。
payload關(guān)鍵字
- 一般作為參數(shù)含義饥瓷，由UI層通過(guò)
dispatch一個(gè)payload參數(shù)在model文件中使用
call
- 結(jié)合
yieldcall發(fā)起ajax請(qǐng)求
//getDetailDiscount 接口名
//payload 參數(shù)
yield call(getDetailDiscount, payload)
put
- 使用
put關(guān)鍵詞提交Reducer
//doDiscounts 一個(gè)名字為doDiscounts的同步方法 修改state
yield put({type: 'doDiscounts', payload: response.data});
select
- 在
effect中可以通過(guò)select獲取model中state - 定義
state
state:{
num:1
}
- 定義
effect
effect:{
*getNum({payload},{select}){
//獲取state中的num
const num = yield select(state => state.num)
}
}
- 跨
model獲取state
other字段為
model的namespace
effect:{
*getOtherNum({payload},{select}){
//獲取state中的num
const num = yield select(state => state.other.num)
}
}
這里是正文
第一步剥纷、定義model
dva里的model主要是用來(lái)開(kāi)始處理數(shù)據(jù)和邏輯的。
dva 通過(guò) model 的概念把一個(gè)領(lǐng)域的模型管理起來(lái)呢铆，包含同步更新 state 的 reducers晦鞋，處理異步邏輯的 effects，訂閱數(shù)據(jù)源的 subscriptions 棺克。
新建一個(gè)一個(gè)model/users.js
export default {
namespace: 'users',
state: [],
reducers: {
doSearch (state, { payload}){
return {
...state,
searchRsp: payload.data,
}
},
},
effects:{
* handleGetSearch({payload, searchRspCallBack}, {call, put}) {
LogTag('****************************handleGetSearch req*************', payload);
const response = yield call(getSearch, payload);
LogTag('****************************handleGetSearch rsp*************', response);
if (response.status === 200 && response.data.status === 0) {
searchRspCallBack(response.data.result)
} else if (response.status === 200 && response.data.status === 1) {
message.error(response.data.msg)
yield put({
type: 'doSearch',
payload: response.data,
});
}
},
subscriptions :{
}
};
新建ApiService.js文件
import request from '../utils/request';
import {stringify} from 'qs';
/*
* 搜索
* */
export async function getSearch(params) {
return request(`/search?${stringify(params)}`);
}
這里我主要在effects 定義了一個(gè)handleGetSearch方法,
這個(gè)方法簡(jiǎn)單理解：
1悠垛、paload是接口的參數(shù)，這里打印一下
2娜谊、searchRspCallBack是一個(gè)回調(diào)方法确买，
主要是在接口正常調(diào)用之后將響應(yīng)內(nèi)容在頁(yè)面層使用
3、yield call(getSearch, payload);是一個(gè)異步調(diào)用接口參數(shù)的方法
4纱皆、上述中的if判斷主要是說(shuō)在接口響應(yīng)到的數(shù)據(jù)為我與后臺(tái)正確定義的返回碼才進(jìn)行相應(yīng)的操作湾趾，
比如這里我跟后臺(tái)約定的是status === 0正常 status === 1 打印后臺(tái)返回的錯(cuò)誤信息
5、searchRspCallBack(response.data.result)
調(diào)用傳過(guò)來(lái)的回調(diào)將接口返回?cái)?shù)據(jù)作為參數(shù)傳進(jìn)去
reducers方法：用于執(zhí)行同步操作派草，改變state等
return {
...state,
searchRsp: payload.data,
}
改變model中state的searchRsp值為接口返回的響應(yīng)內(nèi)容
第二步搀缠、使用model中的方法
model中異步獲取數(shù)據(jù)的方法定義好之后如何使用呢？
this.props.dispatch({
type: 'users/handleGetSearch',
payload: {
keywords: this.state.searchText,
limit: this.state.limit
},
searchRspCallBack: this.handleSearchRspCallBack
})
handleSearchRspCallBack = (rsp)=>{
LogTag(rsp)
}
這是dva中使用dispatch調(diào)用model中方法的寫(xiě)法近迁，注意在使用此方法之前要先使用 connect將model與component連接起來(lái)艺普，如果你熟悉 redux，這個(gè) connect 就是 react-redux 的 connect 鉴竭。
這里使用注解的方法使用connect
@connect(({users, loading}) => ({
users,
}))
上述dispatch的簡(jiǎn)單解釋?zhuān)?/p>
1歧譬、type為要調(diào)用的哪個(gè)model中的哪個(gè)方法，
2搏存、payload為傳的參數(shù)缴罗，這里傳了一個(gè)keyword與limit數(shù)量過(guò)去
3、searchRspCallBack: this.handleSearchRspCallBack的意思是將本地的一個(gè)方法作為參數(shù)傳遞到model中祭埂，
如果model中正確響應(yīng)之后將響應(yīng)的內(nèi)容作為參數(shù)傳遞到這個(gè)方法中面氓，
然后我本地寫(xiě)一個(gè)handleSearchRspCallBack方法用來(lái)接收響應(yīng)
這樣我在component層就可以拿到接口響應(yīng)的內(nèi)容了
這是我用來(lái)獲取接口異步數(shù)據(jù)的方法第一種兵钮，還有一種就是之前在model中執(zhí)行了reducer同步方法將接口返回的數(shù)據(jù)保存在了model中的state里面，在componentWillReceiveProps鉤子函數(shù)也可以拿到我們需要的響應(yīng)
componentWillReceiveProps(nextProps){
if(nextProps){
LogTag(nextProps.users.searchRsp)
}
}
上述中nextProps.users.searchRsp就是接口返回的值了
簡(jiǎn)單的總結(jié)
1舌界、先在model中定義一個(gè)方法用來(lái)執(zhí)行異步調(diào)用接口的方法掘譬，可以直接使用回調(diào)方法的方法將響應(yīng)作為參數(shù)回調(diào)，也可以使用同步reducer的方法將數(shù)據(jù)保存在state中呻拌，后面component層去取model中state的值
2葱轩、兩種方法都可以獲取到異步調(diào)用接口返回的響應(yīng)，第一種好需要定義一個(gè)回調(diào)方法藐握，第二種獲取model中state值需要定義state,在不同的場(chǎng)景使用不同的方法
文章補(bǔ)充：2019.6.1
- 使用
callback非常的不優(yōu)美靴拱，這里官方其實(shí)早已提供promise的寫(xiě)法
*handleUpdateBasicInfo({ payload, user }, { call, put, select }){
const response = yield call(postUpdateBasicInfo, payload);
if (response && response.status === 0) {
return response.data
}
},
//這里在effect中直接return 我們想知道的結(jié)果
handleUpdateBasicInfo = (params) => {
const { dispatch } = this.props;
dispatch({
type: 'user/handleUpdateBasicInfo',
payload: {
...params,
},
}).then(res=>{
console.log('res',res)
})
};
//這里then中可以獲取到數(shù)據(jù)
