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 access to.

Part 2 — Store

This is where all of your state is held.

To create your store you are required to pass it your reducers, (which we will get into next) and the default state of your application.

Part 3 — Reducers

Reducers are pure functions that take in the previous state of your store and an action you would like to use to transform the store. These are commonly a list of case statements.

As you can see, because reducers are pure functions, you must return an immutable copy of your state with the changes you wish to make.

Part 4— Actions

Actions are the only way to dispatch changes through your reducers to your store. Basically your actions are the functions you use in your actual React component to pass your changes back to the store.

Here is an example of an action:

Pretty simple, right? Well you may be asking “but how do I use that in my React app?” You use React-Reduxs’ built in connect function to map your Redux actions down through your React application.

Now you have access to the changeUserInfo action in EVERY React component. How cool is that?!?!

Now you can go to your React login component that you created and fire off the changeUserInfo function when someone fills in your login form like so:

Those are the basics of React-Redux. Now go forth and create beautiful things!

__

If you have any questions about React-Redux or are hiring in the LA area, shoot me an email me@michaelkulinski.com ❤