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

Question

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

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

闭包是一个高阶函数(HOF)的实现,以便为私有变量创建一个新的范围......对吗？HOFs的其他例子包括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);
  };