完成异步 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 返回一个承诺，然后在其他地方使用 then() 来挂钩完成。

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

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

这是因为Promise<T> 上的.then() 的类型是then<S>(callback: T => S): Promise<S>，这意味着调用then 的结果是另一个promise，所以不需要你自己构造。

此外，看起来您将标准 function 语法与粗箭头 (=>) 语法混合在一起，同时保持一致并在任何地方使用 => 也有助于精简代码：

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));