Thunk. How it Works with the Redux Store.

If you are building a React application with a Redux store you might be utilizing some middleware called “thunk”. We use it, but what does it do? Where does it come from? And, what is it doing for us? In this blog lets walk through the steps of setting it up.

First to handle and manipulate state in a React application we need to utilize the Redux store. Why? Because Redux is a predictable state container designed to help you write JavaScript apps that behave consistently throughout the application. We can set up Redux by installing it globally in the terminal, then importing the functions needed to apply the Redux store throughout our application where needed. We do this with the function createStore, set it to a variable in our index.js file, and pass that variable as prop to our Provider component. Then we use the function applyMiddleWare and pass in thunk as an argument.

What is thunk? Thunk by definition in programming is subroutine used to inject an additional calculation into another subroutine. Thunk or Thunks are primarily used to delay a calculation until its result is needed. Or insert operation in the beginning or end of another subroutine. In React we use thunk when we dispatch an action to the store.

How do we dispatch an action to a store? First we need to decide which component is in need of this functionality. Once determined we need to import the connect function at the bottom of our component and wrapping the component name as an argument. Then we need to decide which action is needed in what behavior. The magic of React/Redux is is that it allows us to define an action creator as function. By using dispatch in our mapDispatchToProps we define our function we want to return, then we invoke dispatch with an argument of the action we want to use. From there as soon as React sees “dispatch” thunk will start listening.

Once thunk receives that action it will direct itself to the action creator we have defined as a function. It see the action object that we are passing in as an argument, and the specific action type that we need. Redux will then go to our reducers that we have defined in our application and find that certain case statement, and manipulate the Redux Store, while manipulating our state for us. Given the function that is returning based on the conditions we have stated will then update the DOM for us as well. So instead of doing this locally and handling state within each separate component, we are having the subroutine of “thunk” listen and calculate which function is holding the specific action we want, from there find the right reducer with that same action, and from there updates the Redux Store.

All in all at the end of the day, thunk can be quite the concept to grasp in terms of programming. I definitely had a hard time understanding it at first. But our jobs as developers is to find where the data is coming from and how do we manipulate it. Luckily for us we have thunk on our side to help guide us through the process.