Question

我很难理解Redux-Thunk（或其他中间件）如何执行异步操作。从下面的示例中，我可以看到调用onOrder时（也许通过click事件），它将分派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 });
        })
    }
}

Answer 1

如果您查看redux-thunk的来源，您会发现在分派操作时，它会检查该操作是否为函数，如果是，它将调用传入{{ 1}}作为参数。

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

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

1 个答案: