React-Redux Basics

First, there is a difference between React-Redux and Redux. Redux is a predictable state container for ANY Javascript application. Whether you’re using Angular, Ember or vanilla Javascript.

However, Redux is most commonly used with ReactJS, using the React-Redux package. This is because React allows you to describe your UI as a function of your current state. React-Redux allows you to bind the actions you create in Redux to your React components.

Basically Redux is like a giant parent component that wraps over your entire React application. This allows Redux to handle all of your state in place and keep it accessible to ALL of your child components without having to explicitly type this.props.blahBlah on every single damn child component.

This sounds amazing and easy right? Well, at a high level it is that easy. But Redux has a TON of new terms that you have to learn. This is probably the most challenging part to be honest. When you find a guide that tells you to “dispatch a reducer type inside your action with an async payload” you just kind of sit there with you mouth open.

There are four main parts to React-Redux.

Part 1 — Default State

This has to be an object, but could just be an empty object if you don’t have any static data you need…