by Carl-Johan Kihl

How to get started with Gatsby 2 and Redux

Gatsby + Redux is a powerful combination when building static web-apps with dynamic features. With Gatsby 2, it has never been easier to get up and running. Today, I’m going to guide you through the steps needed.

Not a big fan of reading? ? Head over to the Redux starter right away:
https://github.com/caki0915/gatsby-redux-test/
or use the Gatsby CLI:

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

What is Gatsby?

Gatsby is one of the most popular static site generators out there. Preconfigured with Webpack, React and GraphQL, it gives you a great head-start when building web-apps. It also comes with a rich eco-system of plugins that makes it easy to connect to a variety of data sources. Read more about Gatsby on their website.

What is Redux?

Redux is a state container often used together with React apps. This article will assume that you already know how Redux works. If you’re new to Redux or need a recap, you’ll find more information on their website.

? Let’s go! ?

Start by creating a new Gatsby project. In the terminal, run: (Replace gatsby-redux-test witha name of your choosing)

npx gatsby new gatsby-redux-test && cd gatsby-redux-test

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

npm install --save redux react-redux

Ok great, let’s add a state!

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

First, add the initial state:

const initialState = {
  isDarkMode: false,
};

Add the action creator (to toggle darkMode on and off):

const TOGGLE_DARKMODE = 'TOGGLE_DARKMODE';

export const toggleDarkMode = isDarkMode => ({
  type: TOGGLE_DARKMODE, isDarkMode
});

Add the reducer:

export default (state = initialState, action) => {
  switch (action.type) {
    case TOGGLE_DARKMODE:
      return { ...state, isDarkMode: action.isDarkMode };
    default:
      return state;
  }
};

Ok great! Now, let’s add the root-reducer. Create a new file index.js inside the state folder.

import { combineReducers } from 'redux';
import app from './app';

export default combineReducers({ app });

Now we 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.

import React from 'react';
import { Provider } from 'react-redux';
import { createStore as reduxCreateStore } from 'redux';
import rootReducer from '.';

const createStore = () => reduxCreateStore(rootReducer);

export default ({ element }) => (
  <Provider store={createStore()}>{element}</Provider>
);

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.

Since we want to export our ReduxWrapper as wrapRootElement from both gatsby-browser.js and gatsby-ssr.js, add this line to both files:

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

Ok Done. Gatsby and Redux are now working together! ? Now we only need a way to test it.

Let’s go for the easiest possible way I can think of: A button on the start page where one can toggle darkMode on and off. When darkMode is on, the button will be dark with white text.

In the terminal run:

npm run develop

And… see the dark theme in action!

Ok, maybe that wasn’t so impressive, but the example does its job and I’m sure you will find a much better application for Redux in your Gatsby-app. ?

Summary

Gatsby + Redux is a powerful combination if you want to build static web-apps with dynamic features. I use it for my projects as well. If you find this article useful, please add a comment and a link to your awesome Gatsby/Redux-app. ? ?