Close Menu
Soshace Digital Blog

    Subscribe to Updates

    Get The Latest News, Updates, And Amazing Offers

    What's Hot
    Podcasts

    13 Best Data Science Podcasts

    CSS

    Style like a pro with CSS variables

    LinkedIn

    Analyzing LinkedIn Recommendations: A Key to Lead Generation

    Important Pages:
    • Home
    • About
    • Services
    • Contact Us
    • Privacy Policy
    • Terms & Conditions
    Facebook X (Twitter) Instagram LinkedIn YouTube
    Today's Picks:
    • Scaling Success: Monitoring Indexation of Programmatic SEO Content
    • Leveraging Influencers: Key Drivers in New Product Launches
    • How Privacy-First Marketing Will Transform the Industry Landscape
    • The Impact of Social Proof on Thought Leadership Marketing
    • Balancing Value-Driven Content and Promotional Messaging Strategies
    • Top Influencer Marketing Platforms to Explore in 2025
    • Emerging Trends in Marketing Automation and AI Tools for 2023
    • Strategies to Mitigate Duplicate Content in Programmatic SEO
    Sunday, September 28
    Facebook X (Twitter) Instagram LinkedIn YouTube
    Soshace Digital Blog
    • Home
    • About
    • Services
    • Contact Us
    • Privacy Policy
    • Terms & Conditions
    Services
    • SaaS & Tech

      Maximizing Efficiency: How SaaS Lowers IT Infrastructure Costs

      August 27, 2025

      Navigating Tomorrow: Innovations Shaping the Future of SaaS

      August 27, 2025

      Maximizing Impact: Strategies for SaaS & Technology Marketing

      August 27, 2025
    • AI & Automation

      Enhancing Customer Feedback Analysis Through AI Innovations

      August 27, 2025

      Navigating the Impact of AI on SEO and Search Rankings

      August 27, 2025

      5 Automation Hacks Every Home Service Business Needs to Know

      May 3, 2025
    • Finance & Fintech

      Critical Missteps in Finance Marketing: What to Avoid

      August 27, 2025

      Analyzing Future Fintech Marketing Trends: Insights Ahead

      August 27, 2025

      Navigating the Complex Landscape of Finance and Fintech Marketing

      August 27, 2025
    • Legal & Compliance

      Exploring Thought Leadership’s Impact on Legal Marketing

      August 27, 2025

      Maximizing LinkedIn: Strategies for Legal and Compliance Marketing

      August 27, 2025

      Why Transparency Matters in Legal Advertising Practices

      August 27, 2025
    • Medical Marketing

      Enhancing Online Reputation Management in Hospitals: A Guide

      August 27, 2025

      Analyzing Emerging Trends in Health and Medical Marketing

      August 27, 2025

      Exploring Innovative Content Ideas for Wellness Blogs and Clinics

      August 27, 2025
    • E-commerce & Retail

      Strategic Seasonal Campaign Concepts for Online and Retail Markets

      August 27, 2025

      Emerging Trends in E-commerce and Retail Marketing Strategies

      August 27, 2025

      Maximizing Revenue: The Advantages of Affiliate Marketing for E-Commerce

      August 27, 2025
    • Influencer & Community

      Leveraging Influencers: Key Drivers in New Product Launches

      August 27, 2025

      Top Influencer Marketing Platforms to Explore in 2025

      August 27, 2025

      Key Strategies for Successful Influencer Partnership Negotiations

      August 27, 2025
    • Content & Leadership

      The Impact of Social Proof on Thought Leadership Marketing

      August 27, 2025

      Balancing Value-Driven Content and Promotional Messaging Strategies

      August 27, 2025

      Analyzing Storytelling’s Impact on Content Marketing Effectiveness

      August 27, 2025
    • SEO & Analytics

      Scaling Success: Monitoring Indexation of Programmatic SEO Content

      August 27, 2025

      Strategies to Mitigate Duplicate Content in Programmatic SEO

      August 27, 2025

      Effective Data Visualization Techniques for SEO Reporting

      August 27, 2025
    • Marketing Trends

      How Privacy-First Marketing Will Transform the Industry Landscape

      August 27, 2025

      Emerging Trends in Marketing Automation and AI Tools for 2023

      August 27, 2025

      Maximizing ROI: Key Trends in Paid Social Advertising

      August 27, 2025
    Soshace Digital Blog
    Blog / JavaScript / React / React Lessons / React Lesson 14: Redux Thunk Deep Dive
    JavaScript

    React Lesson 14: Redux Thunk Deep Dive

    Mohammad Shad MirzaBy Mohammad Shad MirzaJuly 23, 2020Updated:July 29, 2020No Comments3 Mins Read
    Facebook Twitter Pinterest Telegram LinkedIn Tumblr Email Reddit
    React Lesson 14: Redux Thunk Deep Dive
    React Lesson 14: Redux Thunk Deep Dive
    Share
    Facebook Twitter LinkedIn Pinterest Email Copy Link
    React Lesson 14: Redux Thunk Deep Dive
    React Lesson 14: Redux Thunk Deep Dive

    Hey everyone, we learned how to make async calls via Redux Thunk middleware in the previous lesson. We also learned how to make simple API calls to the server. This knowledge will be enough for 80% of the cases for executing standard tasks.
    In this lesson, we will understand the internals of Redux Thunk and the use cases where we should use it.

    What is thunk and why it is needed

    Let’s recall what action is. It’s just a plain object which tells the reducer about how to update the state. It usually has a type property and a payload with data in it. Something like this:

    {
      type: "ADD_ARTICLE",
      payload: "Text to add"
    }

    The action creators create this object whenever we need to dispatch an action:

    const addArticle = () => {
        return {
            type: "ADD_ARTICLE",
            payload: "Text to add"
        }
    }
    

    That’s it for the action creators and thus comes the limitations with it. An action can only be a plain object and nothing else. Also, the action creator instantly dispatches the action whenever it is called.

    Thunk allows us to return a function from this action creator instead of a plain object which gives us more control over when to dispatch them and also perform some other operations before dispatching the action. For our case, that other action is fetching the articles from the server. You might be already familiar with this functionality as higher-order functions:

    const addArticle = () => {
        return {
            type: "ADD_ARTICLE",
            payload: "Text to add"
        }
    }
    
    const fetchArticle = () => {
        //return a function instead of plain object
        return function(dispatch, getState){
            //perform some operation before dispatching the action
            dispatch(addArticle);
        }
    }

    The inner function receives two arguments: dispatch and getState

    1. dispatch: Dispatches an action to trigger a state change
    2. getState(): Returns the current state tree of your application.
    Read More:  React Lesson 9: Homework Lesson 8

    By using these two, we can cover all the complicated cases where a plain object action might fall short. These two come handy when making async API calls as we have already seen in the previous article. Let’s see what’s happening inside this Redux Thunk middleware.

    Redux Thunk in a nutshell

    After installing redux-thunk, every action goes through the middleware which looks something like:

    function createThunkMiddleware(extraArgument) {
      return ({ dispatch, getState }) => next => action => {
        if (typeof action === 'function') {
          return action(dispatch, getState, extraArgument);
        }
        return next(action);
      };
    }
    
    const thunk = createThunkMiddleware();
    thunk.withExtraArgument = createThunkMiddleware;
    
    export default thunk;

    Let’s see what’s happening here. First, we check the dispatched action is a function. If true, it calls the dispatched function and returns whatever it returns.

    return action(dispatch, getState, extraArgument);

    If not, it passes the action to the next middleware or to the Redux.

    return next(action);
    

    This simple piece of code takes care of all our worrisome tasks. Isn’t that amazing?

    I hope this article was helpful and you understood the internals of Redux Thunk.

    Your Home Task is to do the uploading of comments in a certain way that the comments are to be uploaded from the server upon a show comments click. Thus, the comments uploading will be executed from the address (for example), where the article’s id is contained at the very end:

    http://localhost:8080/api/comment?article=56c782f18990ecf954f6e027

    That’s it for today. Let’s continue our home task in the next lesson.

    We are looking forward to meeting you on our website blog.soshace.com

    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Mohammad Shad Mirza
    • X (Twitter)
    • LinkedIn

    JavaScript lover working on React Native and committed to simplifying code for beginners. Apart from coding and blogging, I like spending my time sketching or writing with a cup of tea.

    Related Posts

    Streamlining Resource Allocation for Enhanced Project Success

    December 18, 2024

    Conducting Effective Post-Project Evaluations: A Guide

    December 16, 2024

    Strategies for Keeping Projects on Track and Meeting Deadlines

    December 10, 2024
    Leave A Reply Cancel Reply

    You must be logged in to post a comment.

    Stay In Touch
    • Facebook
    • Twitter
    • Pinterest
    • Instagram
    • YouTube
    • Vimeo
    Don't Miss
    Interview November 24, 2024

    Strategies for Effectively Discussing Weaknesses in Interviews

    When discussing weaknesses in interviews, adopt the STAR method: outline the Situation, Task, Action, and Result. Focus on genuine weaknesses and demonstrate proactive steps taken to mitigate them, showcasing self-awareness and growth potential.

    Introduction to WebAssembly: The Magic of Native Code in Web Apps

    August 5, 2019

    Crafting a High-Performing Team: A Startup’s Essential Guide

    December 16, 2024

    Strategic LinkedIn Techniques for Real Estate Lead Generation

    December 16, 2024

    Categories

    • AI & Automation
    • Angular
    • ASP.NET
    • AWS
    • B2B Leads
    • Beginners
    • Blogs
    • Business Growth
    • Case Studies
    • Comics
    • Consultation
    • Content & Leadership
    • CSS
    • Development
    • Django
    • E-commerce & Retail
    • Entrepreneurs
    • Entrepreneurship
    • Events
    • Express.js
    • Facebook Ads
    • Finance & Fintech
    • Flask
    • Flutter
    • Franchising
    • Funnel Strategy
    • Git
    • GraphQL
    • Home Services Marketing
    • Influencer & Community
    • Interview
    • Java
    • Java Spring
    • JavaScript
    • Job
    • Laravel
    • Lead Generation
    • Legal & Compliance
    • LinkedIn
    • Machine Learning
    • Marketing Trends
    • Medical Marketing
    • MSP Lead Generation
    • MSP Marketing
    • NestJS
    • Next.js
    • Node.js
    • Node.js Lessons
    • Paid Advertising
    • PHP
    • Podcasts
    • POS Tutorial
    • Programming
    • Programming
    • Python
    • React
    • React Lessons
    • React Native
    • React Native Lessons
    • Recruitment
    • Remote Job
    • SaaS & Tech
    • SEO & Analytics
    • Soshace
    • Startups
    • Swarm Intelligence
    • Tips
    • Trends
    • Vue
    • Wiki
    • WordPress
    Top Posts

    JavaScript / Node.js Tools

    Programming January 14, 2016

    React Lesson 8: Deep Dive into React Redux

    JavaScript February 9, 2020

    Build Real-World React Native App #6: Show Bookmark and Categories

    JavaScript December 7, 2020

    Data Science Life Cycle Overview

    Beginners October 11, 2019

    Subscribe to Updates

    Get The Latest News, Updates, And Amazing Offers

    About Us
    About Us

    Soshace Digital delivers comprehensive web design and development solutions tailored to your business objectives. Your website will be meticulously designed and developed by our team of seasoned professionals, who combine creative expertise with technical excellence to transform your vision into a high-impact, user-centric digital experience that elevates your brand and drives measurable results.

    7901 4th St N, Suite 28690
    Saint Petersburg, FL 33702-4305
    Phone: 1(877)SOSHACE

    Facebook X (Twitter) Instagram Pinterest YouTube LinkedIn
    Our Picks
    Development

    Top Front-End Development Tools to Elevate Your Projects in 2024

    Beginners

    Web Development Contract: Talent Agreement Essentials | Things to Include and Avoid

    Beginners

    Sorting Algorithms Overview: Theory and Visualization

    Most Popular

    Programming Patterns. Strategy, Observer, Iterator

    Programming

    11. Уроки Node.js. Эхо-сервер.

    Programming

    Women in Tech Series: Pioneers of ‘Coding for Everyone’ Movement

    Startups
    © 2025 Soshace Digital.
    • Home
    • About
    • Services
    • Contact Us
    • Privacy Policy
    • Terms & Conditions

    Type above and press Enter to search. Press Esc to cancel.