How to set up the Redux Thunk on your Gatsby project

Recently, I’ve started to use Gatsby for my projects and when I wanted to connect Gatsby to Redux/Thunk, I couldn’t find a good tutorial for that. That’s why I decided to write an article for other developers and I hope it would be helpful.

If you don’t have enough time for reading the article you can pull the starter project with Redux Thunk from here:
https://github.com/amirjafari1992/gatsby-redux-thunk
or use the Gatsby CLI:

npx gatsby new gatsby-redux-test https://github.com/amirjafari1992/gatsby-redux-thunk

What is Gatsby?

Gatsby.js is a PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast. Read more about Gatsby on their website.

What is Redux?

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
Read more about Redux

What is Redux Thunk?

By default actions in Redux are dispatched synchronously, which is a problem for any non-trivial app that needs to communicate with an external API or perform side effects. Thankfully though, Redux allows for middleware that sits between an action being dispatched and the action reaching the reducers. There are two very popular middleware libraries that allow for side effects and asynchronous actions: Redux Thunk and Redux-Saga. In this post, we’ll introduce the former: Redux Thunk.

Let’s go

We start by creating a new Gatsby project. In the terminal, run:

npx gatsby new [your project's name] && cd [your project's name]

Next step is to install redux and react-redux packages from NPM.

npm install --save redux react-redux redux-thunk

Ok great, let’s add a state!

First, create a new folder called actions inside of your src folder and create files types.js and sampleAction.js .

Then add this line on the types.js

export const types = {
  SAMPLE_TYPE: "SAMPLE_TYPE",
}

Add the action on the sampleAction.js :

Second, create a new folder called state inside of your src folder and create a file app.js. For this tutorial, we’re going to add a simple function that lets you change a variable “darkMode” on and off.

add the initial state and reducer on app.js file:

Good! Now, it’s time to add the root-reducer. Create a new file index.js inside the state folder.

Now we are going to create a Store and Provider. Create a new file ReduxWrapper.js in the state folder. This component is going to wrap our root-component in Gatsby.

Gatsby will render our app both on the server and in the browser, and lucky for us Gatsby has a very flexible API that lets us hook into the rendering. ? We can implement the hooks from two files: gatsby-browser.js and gatsby-ssr.js.

The hook we are interested in is called wrapRootElement and lets you wrap your app with a custom element. Exactly what we need for our Redux Provider. ? You can read more about wrapRootElement in the documentation.

add this line for exporting our ReduxWrapper as wrapRootElement to gatsby-browser.js and gatsby-ssr.js.

export { default as wrapRootElement } from 'src/state/reduxWrapper';

Good. Gatsby and Redux are now working together! Now we should connect our page and test it.

In this example, I wanna create a button on the main page and when I click on the button it will show the dark mode status. so let’s connect our main page page/index.js to our App state.

In this way, we will add a button and show the status as a text on that. Also when the dark mode status is on the button must be dark with white color and when it’s off it should be light with black color.

everything is ready and now we should run the project:

gatsby develop

And… see the dark theme in action!
I hope that would be helpful for you :)

Source: Freecodecamp article and my personal experience
Linkedin account: https://www.linkedin.com/in/amirjfry/