by Carl-Johan Kihl

How to get started with Gatsby 2 and Redux

Gatsby 2 and Redux blends together like candy in a jar

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
Redux and React-redux packages installed

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;
  }
};
Initial State, Action Creator, and Reducer

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 });
Our root reducer.

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>
);
Create a Store and a 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';
Export our ReduxWrapper from gatsby-ssr.js and gatsby-browser.js

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.

A simple test to see that Redux is actually working.

In the terminal run:

npm run develop

And… see the dark theme in action!

Minimal Redux example

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. ? ?

https://carljohan.me - A Drawer is a good use-case for Redux