如何在dva的effects中實現回調
需求
在前端實現修改用戶密碼的功能，通過dispatch來實現與后端api接口的交互。
界面點擊“提交”執行的代碼如下：
handleSubmit = () => {
const { form, dispatch } = this.props
form.validateFields((err, fieldsValue) => {
if (err) return
const values = {
...fieldsValue
}
dispatch({
type: 'account/modifyPwd',
payload: values
})
})
}
model中effect的代碼如下：
- modifyPwd ({ payload }, { call, put }) {
const response = yield call(apiMethod, payload)
}
此時前端需要獲取到調用接口的結果，來顯示“修改成功”or“修改失敗”，
方法一：自己構造Promise
由於dva的1.x版本並未實現callback，只能通過自己構造Promise來實現回調。
界面代碼修改為：
handleSubmit = () => {
const { form, dispatch } = this.props
form.validateFields((err, fieldsValue) => {
if (err) return
const values = {
...fieldsValue
}
new Promise((resolve) => {
dispatch({
type: 'account/modifyPwd',
payload: {
data: values,
resolve
}
}).then((res) => {
if (res) {
message.success('修改成功')
} else {
message.error('修改失敗')
}
})
})
})
}
model中的effect代碼修改為：
- modifyPwd ({ payload }, { call, put }) {
const { data, resolve } = payload
const response = yield call(apiMethod, data)
!!resolve && resolve(response)
}
方法二：優雅的callback寫法
在dva 2.x下，有另外一種callback的優雅的寫法。
界面代碼修改為：
handleSubmit = () => {
const { form, dispatch } = this.props
form.validateFields((err, fieldsValue) => {
if (err) return
const values = {
...fieldsValue
}
dispatch({
type: 'account/modifyPwd',
payload: values,
callback: (response) => {
if (response) {
message.success('修改成功')
} else {
message.error('修改失敗')
}
}
})
})
}
model中的effect代碼修改為：
- modifyPwd ({ payload, callback }, { call, put }) {
const response = yield call(apiMethod, payload)
if (callback && typeof callback === 'function') {
callback(response)
}
}
方法三：使用then方法
在dva 2.x下，默認對dispatch提供了Promise回調，但是並未提供傳參邏輯，因此需要通過model中的state來實現傳參。
界面代碼修改為：
handleSubmit = () => {
const { form, dispatch, account } = this.props
form.validateFields((err, fieldsValue) => {
if (err) return
const values = {
...fieldsValue
}
dispatch({
type: 'account/modifyPwd',
payload: values
}).then(() => {
if (account.modifyState) {
message.success('修改成功')
} else {
message.error('修改失敗')
}
})
})
}
model中的effect代碼修改為：
- modifyPwd ({ payload }, { call, put }) {
const response = yield call(apiMethod, payload)
yield put({
type: 'saveModifyState',
payload: {
response: response
}
})
}
在model中實現一個reducer方法來修改state中的modifyState的狀態：
saveModifyState (state, { payload }) {
return {
...state,
modifyState: payload.response
}
}
總結
方法一在dva 1.x下是唯一的實現方式，在2.x之后就不再需要這么繁瑣的寫法了。
方法二通俗易懂，代碼簡潔，但是破壞了傳統的redux的數據流轉方式，不被布道者所提倡。
方法三是官方提倡的寫法，但是需要多實現一個reducer，代碼量比方法二要大。