How to get Started with React Redux

The Mandalorian and Baby Yoda working with Redux on their ship the Razor Crest. The original image was copied from here

Redux is one of the most popular patterns that is in use in the frontend world today. You see the same pattern in not only React, but Angular and Vue as well. Redux is very powerful as it provides a routine way that you can manage state in your applications. Moreover, Redux scales as your projects get larger. So it works great for both small and enterprise applications.

This post is going to walkthrough how to use Redux in your React applications. I’m going to assume that you understand some basics about React Hooks as I’m going to be using the useState, useEffect, useSelector and useDispatch hooks respectively.

I’m also going to be walking through a sample project that I’ve setup at my GitHub repo here. We will be walking through different phases of the same project. I’m going to walk you through (1) setting up Redux, (2) adding actions and reducers, and (3) creating side effects.

As a Mandalorian fan myself, the sample project will be a mini fan site with pages for episode info, quotes, and more.

Redux Concepts

So before we dive into using Redux, we should cover some vocabulary that we’ll be using in the subsequent sections.