"thunk "是那些听起来很吓人的编程术语之一，但我们中的许多人实际上都熟悉并使用过它们。让我们先看看维基百科是如何定义thunk的[1]。

在计算机编程中，thunk是一个子程序，用于向另一个子程序注入额外的计算。Thunks主要用于延迟计算，直到需要其结果，或者在另一个子程序的开始或结束时插入操作。

这提供了一点帮助，但也许有点太抽象了。

那么，thunk到底是什么呢？它只是一个从另一个函数返回的函数。让我们看一下JavaScript中的一个简单例子。

function delayedLogger(message, delay) {
  return function (logger) {
    setTimeout(function () {
      logger(message);
    }, delay);
  };
}

在这个例子中，当我们调用delayedLogger 函数时，它会返回一个thunk。然后我们可以把这个thunk传给一个logger 参数，这个参数将在指定的delay 之后执行。

const thunk = delayedLogger('See you in a bit', 2000);
thunk(console.log);

在这个例子中，我们会看到"See you in a bit" ，两秒后记录到控制台。

奖励：在Redux中使用

如果你熟悉Redux，你可能知道动作创建者的概念：返回动作对象的函数。下面是一个动作创建器的例子，它做出了一个将产品添加到购物车的动作。

function addToCart(product) {
  return {
    type: 'ADD_TO_CART',
    payload: product,
  };
}

事实证明，我们的动作创建器需要更多的灵活性：我们需要能够异步地分配一个动作：通常是在我们执行一个获取请求来保存或加载API的数据之后。我们可以通过使用redux-thunk 来解决这个问题，这个Redux中间件允许我们从动作创建者返回thunks[2]。

让我们模拟一下这将是什么样子的。我们将从API中加载一个产品列表，然后用这些加载的产品派发一个动作。

function loadProducts() {
  // Return a thunk
  return function (dispatch) {
    fetch('some-product-api-url')
      .then((res) => res.json())
      .then((data) => {
        dispatch({
          type: 'ADD_PRODUCTS',
          payload: data.products,
        });
      });
  };
}

就这样，我们有了。thunk 概念的一个更实际的应用!

学习什么是Thunk？

奖励：在Redux中使用