javascript - 如何在异步 thunk 完成后干净地执行同步操作

Question

在一个 react ​​组件中，我想调度一个异步操作，然后当它完成时，调度一个取决于异步操作添加的值的同步操作。使用 redux-thunk，到目前为止，我已经:

/* actionCreators.js */
export function refresh() {
  return function(dispatch) {
    return services.getData().then(response => {
      return new Promise(resolve => {
        dispatch(addData(response.data))
        resolve()
      })
    })
  }
}

/* myComponent.js */
refreshData = id => {
  this.props.dispatch(refresh(id)).then(() => {
  this.props.handleChange(id)
  })
}

这实际上是有效的，但似乎有很多嵌套代码，我想知道是否有更标准的方法来处理这个异步。

Answer 1

您在异步操作完成后执行逻辑的总体策略是正确的，您需要从 thunk 返回一个 promise ，然后使用 then()在其他地方 Hook 完成。

也就是说，为了帮助精简代码，您可以进行的第一个更改与 Promise 构造函数有关。您可以更改 refresh()实现到

export function refresh() {
    return function(dispatch) {
        return services.getData().then(response => {
            return dispatch(addData(response.data));
        }
    }
}

这是因为 .then() 的类型在Promise<T>上是 then<S>(callback: T => S): Promise<S> ，表示调用 then 的结果是另一个 promise ，因此您无需构建自己的 promise 。

此外，看起来您正在混合标准 function与粗箭头 ( => ) 语法保持一致并使用 => 的语法Everywhere 也可以帮助精简你的代码:

export const refresh = () =>
    dispatch => services.getData()
        .then(response => dispatch(addData(response.data));

/* myComponent.js */
refreshData = id => this.props.dispatch(refresh(id))
    .then(() => this.props.handleChange(id));