What is a Thunk?

栏目: IT技术 · 发布时间: 4年前

内容简介:“Thunk” is one of those programming terms that sounds intimidating, but many of us are actually familiar with and have used them. Let’s first see how Wikipedia defines thunks[1]:This offers a little help, but maybe is a little too abstract.So, what is a th

“Thunk” is one of those programming terms that sounds intimidating, but many of us are actually familiar with and have used them. Let’s first see how Wikipedia defines thunks[1]:

In computer programming, a thunk is a subroutine used to inject an additional calculation into another subroutine. Thunks are primarily used to delay a calculation until its result is needed, or to insert operations at the beginning or end of the other subroutine.

This offers a little help, but maybe is a little too abstract.

So, what is a thunk really? It’s simply a function returned from another function . Let’s look at a quick example in JavaScript:

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

In this example, when we call the delayedLogger function, it returns a thunk . We can then pass that thunk a logger parameter, which will be executed after the specified delay .

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

In this example, we’ll see "See you in a bit" logged to the console after two seconds.

Bonus: Use in Redux

If you’re familiar with Redux, you likely know the concept of action creators : functions that return action objects. The following is an example of an action creator that makes an action that adds a product to a shopping cart:

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

It turns out that we need a little more flexibility with our action creators: we need to be able to dispatch an action asynchronously: often after we perform a fetch request to save or load data from an API. We can solve this issue by using redux-thunk , a Redux middleware that allows us to return thunks from action creators [2].

Let’s mock up what this would look like. We’ll load a list of products from an API and then dispatch an action with those loaded products.

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,
        });
      });
  };
}

And there we have it: A more practical application of the thunk concept!

References:

  1. Wikipedia: Thunk
  2. redux-thunk

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法新解

算法新解

刘新宇 / 人民邮电出版社 / 2016-12-1 / CNY 99.00

本书分4 部分,同时用函数式和传统方法介绍主要的基本算法和数据结构。数据结构部分包括二叉树、红黑树、AVL 树、Trie、Patricia、后缀树、B 树、二叉堆、二项式堆、斐波那契堆、配对堆、队列、序列等;基本算法部分包括各种排序算法、序列搜索算法、字符串匹配算法(KMP 等)、深度优先与广度优先搜索算法、贪心算法以及动态规划。 本书适合软件开发人员、编程和算法爱好者,以及高校学生阅读参考......一起来看看 《算法新解》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换