Member-only story
Gatsby with Redux using a Gatsby theme
Even though Gatsby is a static site generator, it can be used to build dynamic applications. Gatsby is, after all, just a framework for building a React application. It just happens to be extremely opinionated and generates an artifact that is a static site. To me, “dynamic” means that an application maintains some form of state. I perform an action and the application “remembers” and allows me to perform more interactions based on this state. A common method for managing state in JavaScript applications is Redux and combined with React Redux to provide React framework bindings to the Redux library.
You don’t always need Redux for state management, but it sure is useful as you begin building more complex applications. For example, an eCommerce frontend. Redux makes it easy to say “hey, I added this to the cart”, do some API calls, handle the respone, and store information about the response in the state. React can then rebuild its component tree based on these changes. And poof! The application shows information about your cart with its new item. Magic 🥳.
I have added Redux to a Gatsby application before. But what about a theme? Can we add Redux to a Gatsby theme that Gatsby application then inherit? We should. Should we? I don’t know, but I will! Unfortunately, the documentation on using Redux as a data storage in Gatsby has a stub, but no content. There is a using-redux example in the Gatsby development repository, though.
