Who Would’ve Thunk: Redux Thunk Under the Hood

Redux Thunk is a very special piece of middleware that makes our lives easier.With a basic Redux store, it is only possible to perform simple synchronous updates by dispatching an action. The use of middleware, Thunk in this case, extends the store’s abilities. This ultimately allows us to write async logic that interacts with the store.

Implementing thunk is relatively simple, and an understanding of how it actually works is not necessarily a prerequisite to be able to use it. After all, if you properly set up your store, you do not have to worry about Thunk.

While trying to get a deeper understanding of Thunk, I came across various resources that were dense and offered very complicated explanations. Instead of feeling like I understood the process that occurred under the hood, I was often left with more questions than answers.

After having spent a some time diving deeper into Thunk, I decided to try my hand at explaining how it works as simply as possible.

Redux Thunk Cycle Graph from: https://ncoughlin.com/posts/react-redux-asnychronous-actions-thunk/

The only way to update state in Redux is through reducers and action creators.

Reducers

A reducer is a pure function that takes an action and the previous state of the application and returns the new state. The action describes what happened and it is the reducer’s job to return the new state based on that action.

Reducer example

Action Creators

Before digging into the hows and whys of Thunk, it is important to understand the concept of action creators.

According to the official Redux documentation:

1. an action creator is merely a function that returns an action object.
2. Redux includes a utility function called bindActionCreators for binding one or more action creators to the store's dispatch() function.
3. Calling an action creator does nothing but return an object, so you have to either bind it to the store beforehand, or dispatch the result of calling your action creator.

It’s important to note that action objects must have a type property and can optionally have a payload property.

Why Thunk?

The Redux Thunk middleware allows you to write action creators that return a function instead of an action. Inside these functions, we can carry out fetches and use this information to manipulate information inside the reducer.These changes to the reducer might result in an update of the rendered information.

Action creators must return an action object. Thunk allows us to return functions. Inside these functions, information is fetched and then used inside an action object’s optional payload property.

Dispatching Actions

In accordance with the official Redux documentation:

dispatch is a function of the Redux store. You call store.dispatch to dispatch an action. This is the only way to trigger a state change.

With React Redux, your components never access the store directly — connect does it for you.

When you dispatch an action, it’s going to end up inside of Thunk. Thunk will then determine whether it is a function or an action object.

If it is an object, Thunk will automatically pass it on to the reducer.

If a function is returned, Thunk will then go ahead and invoke the function and with the dispatch and optional getState functions as arguments. Here we wait for the fetch request to finish and then dispatch our action manually.

action creator returning a function example

Here on line 8, dispatching manually returns an object with a type and optional payload property(in this example it is named medications).Thunk will then determine that it is an action object and pass it along to the reducer, ultimately updating state.