简单来说，thunk 和高阶函数有什么区别？

Question

我知道两者都是返回函数的函数。

到目前为止，我使用 thunk 的经验是使用它们来返回函数，而不仅仅是操作对象，以便我可以处理 Redux 中的异步请求。

闭包是高阶函数 (HOF) 的一种实现，目的是为私有变量创建新的作用域……对吗？ HOF 的其他示例包括 map、reduce 和 filter。

还有什么其他东西明确定义了两者之间的区别吗？

谢谢。

Answer 1

我知道两者都是返回函数的函数

你的理解有点不对

• Thunks 可以返回任何类型的值——不仅仅是函数类型
• Higher-order functions 可以返回任何类型的值——不仅仅是函数类型

到目前为止，我使用 thunk 的经验是使用它们来返回函数，而不仅仅是操作对象，以便我可以在 Redux 中处理异步请求。

Thunk（以及高阶函数）本质上与任何特定库（React、Redux）或任何特定控制流（同步、异步）无关。 thunk 只是一个空函数——它们有多种常见用例，但最常用于延迟特定计算的评估。

闭包是高阶函数 (HOF) 的一种实现，目的是为私有变量创建新的作用域……对吗？ HOF 的其他示例包括 map、reduce 和 filter。

closure 不一定是高阶函数的实现。 function 关键字（和 => 箭头函数语法）确实创建了一个闭包，它确实有一个新的（词法）范围，是的。

还有什么明确定义了两者之间的区别的吗？

是的。它们有何相同之处：

• 它们都是函数
• 它们都可以返回任何类型的值

它们有何不同：

• thunk 是空函数（它们不接受任何参数）
• 高阶函数接受一个函数作为参数和/或返回一个函数

也许是最关键的区别：

• 如果 thunk 返回一个函数，只有可以被视为高阶函数。

Answer 2

Thunk 是包装表达式的函数，以延迟它们的求值。

这个延迟是在 Redux thunk 中实现的，当一个动作被调用时它会返回一个函数。返回的这个函数可以在以后调用。

这里是一个 thunk 动作的例子。

function incrementAsync() {
  // the below function is called by Redux Thunk middleware below.
  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };

高阶函数只是一个返回函数或将函数作为其参数之一的函数。因为这个函数返回另一个以 dispatch 作为参数的函数，所以这是一个高阶函数的例子。

redux thunk 中间件的代码类似于这样

function createThunkMiddleware() {
  return store => next => action => {
    if (typeof action === 'function') {

      // since action is a function it is a thunk action creator
      // so call it with store methods
      return action(store.dispatch, store.getState);

    }
    // action is not a function so redux thunk ignores it
    return next(action);
  };
}

一旦我们的 thunk 动作创建者被调用，它就会通过中间件链发送动作函数。当它到达我们的 thunk 中间件时，这个动作被识别为一个函数，因此使用 store 的 dispatch 和 getState 方法再次调用。

由于第二个函数调用，我们现在处于 thunk 动作创建者返回函数的范围内。这意味着我们现在可以执行异步逻辑并且仍然可以访问 store 的 getState 和 dispatch 方法。这就是为什么我们的 thunk action creator 可以被认为是一个 thunk 表达式。通过使用高阶函数，我们可以访问，但推迟使用 store 的 dispatch 或 getState 方法到未来时间。如下所示，增量动作在一秒延迟后被调用。

function incrementAsync() {
  // the below function is called by Redux Thunk middleware below.
  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };