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

Question

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

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

Answer 1

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

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

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

How does middleware execute async actions?

redux

redux-thunk

react-redux