中间件如何执行异步操作？答案

【问题标题】：How does middleware execute async actions?中间件如何执行异步操作？
【发布时间】：2019-12-26 10:41:18
【问题描述】：

我有点难以理解 Redux-Thunk（或其他中间件）如何执行异步操作。从下面的示例中，我可以看到当onOrder 被调用时（可能是通过点击事件），它将调度purchaseBurger 创建的动作。 purchaseBurger 反过来返回一个函数，该函数将调度一个指示购买开始的动作，然后是一个 http 请求。我的困惑是：purchaseBurger 返回的函数何时真正被调用和执行？它也是如何被调用的？

ContactData.js
const mapDispatchToProps = dispatch => {
        return {
            onOrder: (orderData) => dispatch(actions.purchaseBurger(orderData))
        }
    }

orders.js
export const purchaseBurgerStart = (orderData) => {
        return {
            type: actionTypes.PURCHASE_BURGER_START
       }
    }

export const purchaseBurger = (orderData) => {
    return dispatch => {
        dispatch(purchaseBurgerStart());
        axios.post('/orders.json', orderData)
        .then(response => {

        })
        .catch(error => {
            this.setState({ loading: false });
        })
    }
}

【问题讨论】：

访问@dan 答案：stackoverflow.com/a/34599594/6818430

标签： redux react-redux redux-thunk

【解决方案1】：

如果您查看redux-thunk 的源代码，您会发现，当您调度一个动作时，它会检查该动作是否是一个函数，如果是，它将调用传入dispatch, getState, extraArgument 的函数论据。

因此，当您调用 dispatch(purchaseBurger()) 时，它会将 purchaseBurger 返回的函数作为操作分派，然后中间件将检查类型并确定它是一个函数，并将使用 dispatch 作为第一个参数调用它

【讨论】：