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

界面點擊“提交”執(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)
  }
  此時前端需要獲取到調(diào)用接口的結果，來顯示“修改成功”or“修改失敗”，

方法一：自己構造Promise
由于dva的1.x版本并未實現(xiàn)callback，只能通過自己構造Promise來實現(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下，默認對dispatch提供了Promise回調(diào)，但是并未提供傳參邏輯，因此需要通過model中的state來實現(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中實現(xiàn)一個reducer方法來修改state中的modifyState的狀態(tài)：

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

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

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

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