A few weeks ago, I decided to dive into Redux and make the experience of learning Redux as simple as possible. As with all of my high-quality guides (yeah, I’m selling myself here), I try to go through the simplest application possible that not only demonstrates all of the core features, but also shows actual applications of those features rather than theoretical examples. Unlike before, however, I’m posting this guide as a series of Youtube videos that I made while streaming on my Twitch channel which shouldn’t come as a surprise after my announcement to branch out to other media beside blogging. Without further ado, here are the videos:

Building your first React + Redux Application (#1): Intro and setting up environment

Wondering what the Redux craze is? In this video, I introduce myself, Redux, and the tutorial series.

We’ll also setup our environment by installing all the correct NPM packages, set up Gulp, Webpack and Babel.

NOTE:

I forgot to mention you have to setup a .babelrc file to load the appropriate Babel plugins. Here’s the config

Building your first React + Redux Application (#2): Actions, Reducers, and Store

In this video, I introduce Actions, Reducers, and the Store as well as implement a simple data-flow for our application.

Watch for the ending where I show you the simplest way of implementing Redux: a pub/sub with Reducers as a middleware upon dispatch.

The code at this point

Building your first React + Redux Application (#3): Hooking up Redux to React

In this video, I introduce react-redux and how to hookup Redux to React using a provider and the connect utility.

Code at this point

Building your first React + Redux Application (#4): Async action creators and middleware

In this video, in this video, we fetch live data from Habitica, store authentication tokens in local storage, and go over the concepts of async and middleware in Redux.

Code at this point