9

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

到目前为止，我使用 thunk 的经验是使用它们来返回函数，而不仅仅是操作对象，这样我就可以在Redux.

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

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

谢谢。

4

2 回答 2

10

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

你的理解有点不正确

  • Thunks可以返回任何类型的值——不仅仅是函数类型
  • 高阶函数可以返回任何类型的值——不仅仅是函数类型

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

Thunks（和高阶函数，就此而言）与任何特定库（React、Redux）或任何特定控制流（同步、异步）没有内在关联。thunk 只是一个空函数——它们有多种常见用例，但最常用于延迟特定计算的评估。

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

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

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

是的。它们是如何相同的：

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

它们有何不同：

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

也许最关键的区别：

  • 如果 thunk返回一个函数，则只能将其视为高阶函数。
于 2017-07-17T17:03:52.173 回答
6

Thunks 是函数包装表达式，以延迟它们的评估。

这种延迟是在 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);
  };
于 2017-07-17T13:31:17.517 回答