需求

在前端实现修改用户密码的功能，通过dispatch来实现与后端api接口的交互。

界面点击“提交”执行的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
handleSubmit = () => {
  const { form, dispatch } = this.props

  form.validateFields((err, fieldsValue) => {
    if (err) return

    const values = {
      ...fieldsValue
    }

    dispatch({
      type: 'account/modifyPwd',
      payload: values
    })
  })
}

model中effect的代码如下：

1
2
3
* modifyPwd ({ payload }, { call, put }) {
  const response = yield call(apiMethod, payload)
}

此时前端需要获取到调用接口的结果，来显示“修改成功”or“修改失败”，

方法一：自己构造Promise

由于dva的1.x版本并未实现callback，只能通过自己构造Promise来实现回调。

界面代码修改为：

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
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代码修改为：

1
2
3
4
5
* modifyPwd ({ payload }, { call, put }) {
  const { data, resolve } = payload
  const response = yield call(apiMethod, data)
  !!resolve && resolve(response)
}

方法二：优雅的callback写法

在dva 2.x下，有另外一种callback的优雅的写法。

界面代码修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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代码修改为：

1
2
3
4
5
6
* 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来实现传参。

界面代码修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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代码修改为：

1
2
3
4
5
6
7
8
9
* modifyPwd ({ payload }, { call, put }) {
  const response = yield call(apiMethod, payload)
  yield put({
    type: 'saveModifyState',
    payload: {
      response: response
    }
  })
}

在model中实现一个reducer方法来修改state中的modifyState的状态：

1
2
3
4
5
6
saveModifyState (state, { payload }) {
  return {
    ...state,
    modifyState: payload.response
  }
}

总结

  • 方法一在dva 1.x下是唯一的实现方式，在2.x之后就不再需要这么繁琐的写法了。
  • 方法二通俗易懂，代码简洁，但是破坏了传统的redux的数据流转方式，不被布道者所提倡。
  • 方法三是官方提倡的写法，但是需要多实现一个reducer，代码量比方法二要大。