如何在dva的effects中實(shí)現(xiàn)回調(diào)
需求
在前端實(shí)現(xiàn)修改用戶密碼的功能，通過(guò)dispatch來(lái)實(shí)現(xiàn)與后端api接口的交互。

界面點(diǎn)擊“提交”執(zhí)行的代碼如下：

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)
  }
  此時(shí)前端需要獲取到調(diào)用接口的結(jié)果，來(lái)顯示“修改成功”or“修改失敗”，

方法一：自己構(gòu)造Promise
由于dva的1.x版本并未實(shí)現(xiàn)callback，只能通過(guò)自己構(gòu)造Promise來(lái)實(shí)現(xiàn)回調(diào)。

界面代碼修改為：

handleSubmit = () => {
const { form, dispatch } = this.props

form.validateFields((err, fieldsValue) => {if (err) returnconst 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)
  }
  方法二：優(yōu)雅的callback寫法
  在dva 2.x下，有另外一種callback的優(yōu)雅的寫法。

界面代碼修改為：

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下，默認(rèn)對(duì)dispatch提供了Promise回調(diào)，但是并未提供傳參邏輯，因此需要通過(guò)model中的state來(lái)實(shí)現(xiàn)傳參。

界面代碼修改為：

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中實(shí)現(xiàn)一個(gè)reducer方法來(lái)修改state中的modifyState的狀態(tài)：

saveModifyState (state, { payload }) {
return {
...state,
modifyState: payload.response
}
}
總結(jié)
方法一在dva 1.x下是唯一的實(shí)現(xiàn)方式，在2.x之后就不再需要這么繁瑣的寫法了。
方法二通俗易懂，代碼簡(jiǎn)潔，但是破壞了傳統(tǒng)的redux的數(shù)據(jù)流轉(zhuǎn)方式，不被布道者所提倡。
方法三是官方提倡的寫法，但是需要多實(shí)現(xiàn)一個(gè)reducer，代碼量比方法二要大。

轉(zhuǎn)載于:https://www.cnblogs.com/dunke/p/11081621.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的如何在dva的effects中实现回调的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。