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

Question

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

到目前为止，我使用thunk的经验一直在使用它们返回函数而不仅仅是动作对象，这样我就可以在Redux处理异步请求。

闭包是一个高阶函数（HOF）的实现，以便为私有变量创建一个新的范围......对吗？ HOF的其他示例包括map ， reduce和filter 。

有没有其他明确定义两者之间差异的东西？

谢谢。

Answer 1

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

您的理解有点不正确

• Thunk可以返回任何类型的值 - 而不仅仅是Function类型
• 高阶函数可以返回任何类型的值 - 而不仅仅是函数类型

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

Thunk（以及更高级的函数）与任何特定的库（React，Redux）或任何特定的控制流（sync，async）本质上没有关系。 thunk只是一个nullary函数 - 它们有各种常见用例，但最常用于延迟特定计算的评估。

闭包是一个高阶函数（HOF）的实现，以便为私有变量创建一个新的范围......对吗？ HOF的其他示例包括map，reduce和filter。

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

有没有其他明确定义两者之间差异的东西？

是。 它们是如何相同的：

• 它们都是功能
• 他们都可以返回任何类型的值

他们是如何不同的：

• thunk是nullary函数（他们不接受任何参数）
• 高阶函数接受函数作为参数和/或返回函数

也许是最关键的区别：

• 如果thunk返回一个函数，它只能被认为是一个高阶函数。

Answer 2

Thunks是函数换行表达式，以便延迟它们的评估。

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

这是一个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中间件时，此操作被识别为函数，因此使用商店的dispatch和getState方法再次调用。

由于第二个函数调用，我们现在处于thunk action creator返回函数的范围内。 这意味着我们现在可以执行异步逻辑，并且仍然可以访问商店的getState和dispatch方法。 这就是为什么我们的thunk动作创建者可以被认为是thunk表达式。 通过使用更高阶函数，我们可以访问，但推迟使用商店的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);
  };