Understanding Thunks in JavaScript

Understanding Thunks in JavaScript

Understanding Thunks in JavaScript - In this tutorial, we will learn about what are thunks and how to use the thunks in our JavaScript code.

Definition of thunk

A thunk is just a function which delays the evaluation of the value.

The thunk function doesn’t take any arguments and gives the value whenever you invoke the thunk.

Example of synchronous thunk

function subtract(x,y){
    return x-y;
}

// subtract function is evaluated the
// expression and result is returned immediately
console.log(subtract(5,3)) // 2


// this is a thunk function

// result is delayed untill we call the thunk() function
const thunk = function (){
    return subtract(5,3);
}

// we always get the same data whenever we call the thunk function
console.log(thunk()) // 2

In the above code, we first defined the subtract function and next we defined thunk function which returns the value of subtract function.

Asyncrouchronous thunks

Sometimes we need to make network requests in such case we need to use asynchronous thunks.

If you know about redux state management library which uses the asynchronous thunks to delay the actions to dispatch.

Let’s see an example:

function fetchData(fn){
   setTimeout(()=>fn(1),2000)
}


const asyncThunk = function (){
   return fetchData(function(data){
      console.log(data)
  })
}

asyncThunk()

// 1

In the above code, we used setTimeout function to make our code asynchronous.

Network requests example using thunks

function fetchData(fn){
  fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => fn(json))
}


const asyncThunk = function (){
   return fetchData(function getData(data){
      console.log(data)
  })
}

asyncThunk()

In the above code we are not calling the getData function immediately we only call the getData function whenever the data is available from the API endpoint. This is image title In our case, we just logged the data in the console if you want to render the data in the dom you can do it.

Rendering data example

This is image title In the above example we used FetchData button to invoke the asyncThunk() function then we render the data in the dom.

Originally published by Sai gowtham at reactgo.com

javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

Best Web and App Development Company in Ahmedabad

Contact DataPierce for any questions or queries you have about website development, designing, marketing projects or any small or enterprise software development.

Top 15 Free JavaScript Frameworks for Web Applications

List of some useful JavaScript Frameworks and libraries for website, web apps, and mobile apps development, that developers should know about to make selection easier.

Mobile App Development Company | Web Development & Design Services

WebClues Infotech is a leading website and mobile development services company. We specialize in full stack development services as well as iOS and Andriod app creation.