Question

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

{{1}}

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

Answer 1

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

那就是说，你可以做的第一个改变是帮助减少代码，这与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的结果是另一个承诺，因此您无需建立自己的。

此外，看起来您正在混合使用标准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));

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

1 个答案: