Pure Redux

Learn how to use Redux with React.

There it is, staring you in the face again: Redux.

React? You can handle React. But this is different. It flat out doesn’t make sense.

First there are all the new terms – actions, reducers, middleware, thunks, immutability… and on top of that that, you’re not even sure what Redux actually brings to the table.

“It’s a predictable state container,” they say. “It’s simple!” they say.

But how do you actually use it to make React apps?

setState was so easy…

Plain React state is straightforward. You set it, the component re-renders, and that’s it. It’s scoped to one component. No hopping around between files.

Redux is a different beast though.

You have to set up a store. You have to write a reducer. Maybe add some middleware (don’t forget to compose it!). Wrap your app in a Provider. Connect certain components (but not all of them!). Dispatch actions.

Oh, you just wanted to make an HTTP call? You need to install redux-thunk for that. Or redux-saga. It’s really up to you. Have fun deciding!

It’s like a choose-your-own-adventure Rube Goldberg machine.

Frustrating editor

And Redux is massively popular. 95% of the entire internet is using this thing. How did they all figure it out? Maybe you’re just missing something.

Most advice is worth the price you paid…

There are nearly infinite tutorials out there, but most of them just tell you what to type without saying why. At the end, you’re left hanging, unable to actually use Redux on your own.

The often-unstated truth about Redux is that it’s built around functional programming principles. These ideas, like immutability and pure functions, are not intuitive at first – but they’re crucial to understanding Redux.

Once you unlock them, though, a whole new world is open to you. Redux, yes. But functional programming, too.

Start at the end

So here’s an idea: What if you learned it… backwards?

Start with something you understand – plain React – and then build on it to learn Redux bit-by-bit, instead of with one big confusing leap.

You’d intimately understand the actions, reducers, thunks… all of it. Not only would you know how they fit together, but you’d know where to put them, too – because you built the structure with your own two hands.

A handcrafted Redux app is like a well-oiled machine. The parts work in harmony and you always know what your app is gonna do next. On top of that, every action is logged – so if something does break, it’s easy to discover why.

Dare I say, you might actually come to enjoy the structure that Redux provides. You might even call it predictable.

What about Context and Hooks?

You might wonder if Redux is still the best option today, in 2019, with Hooks and Context being built-in to React.

It’s a good question.

And honestly, sometimes plain old React Context is the right tool for the job – it’s what Redux is built upon, after all.

React Hooks are a(nother) new way to manage state, but Hooks are more useful for simplifying component state than for app-wide state management (where Redux shines). Hooks are a low-level tool, like Context.

Redux takes Context to another level, by adding a place to store the data and offering an organized way to update it. The action log, easily viewable in the Redux DevTools, is the icing on the cake and makes debugging a breeze.

An easier way to learn Redux.

You can learn Redux, and this video course will help you do it. For real this time.

You’ll get hands-on practice by building an app in React, and then refactoring it to use Redux. Over the course of 15 video lessons, you’ll learn all the fundamental concepts, plus how to actually use them in a React app.

The course is broken up into small chunks (one thing at a time!) and each concept is presented in a simple, unintimidating way.

There are exercises, too. You’ll be writing your own code right from the start — this isn’t a “copy, paste, watch it run” tutorial. And, as a fellow person who likes to know why things work the way they do, I’ve taken time to explain the reasons behind the concepts.

Redux Course screenshot

Oh one more thing: I promise I won’t make you write another TODO app. We’ve all had enough of those :)

Here’s what you’ll learn

  • What Redux does, what it’s for, and what it’s not for
  • Learn how to add Redux to your own app
  • How to use connect and Provider to join React + Redux
  • How to refactor React state into Redux
  • How to wield immutability in your apps
  • The easiest way to make HTTP API calls with Redux
  • Learn to use the Redux developer tools to debug your app
  • What to test in a Redux app, and how to write the tests

The course consists of 15 video lessons and 11 exercises, around 1hr 44min in total.

Most of the videos are between 5 and 10 minutes – quick-paced enough to hold your attention, while going deep enough to cover the details.

The Basics

What is Redux? What's it for?

Start with a Plain React App

Add Redux to the React App

Core Concepts

Actions

Reducers

Immutability in Practice

What is Immutability?

Why Immutability Matters to Redux

How to Immutably Update Arrays

How to Immutably Update Objects

Useful Extras

Easier debugging with Redux DevTools

Make API calls with redux-thunk

Easy immutability with Immer

Testing

How to Test a Reducer

How to Test Plain Action Creators

How to Test Async (thunk) Actions

Buy It Now?

The course is currently closed to new students, but will be opening up again soon!

Get on the waiting list by signing up below.

FAQ

Q: How much do I need to know about React to take this course?

This course is focused on Redux, and how to use it with React, but I don’t cover the basics of React here.

You should have a solid understanding of props and state and JSX. If you haven’t worked with React before, I suggest learning it first (in isolation) and then revisiting Redux later. I wrote a book, Pure React, that covers React fundamentals and it’s perfect for beginners.

Q: What’s the format of the course?

The course is made up of video lessons and text-based exercises that you can work through at your own pace.

It’s hosted inside the Podia platform, which works similar to most other courseware out there. When you purchase, you’ll create an account that will grant you access to the course. Take a look at the screenshot above.

Q: So… it’s not a book?

Nope, it’s a video course. Yes, I know my last product was a book. I thought I’d mix it up this time.

Q: How long will the course be available once I join?

Forever! At least until I die and stop paying my hosting bills, or until the heat death of the universe.

You can go at your own pace.

Q: What’s the refund policy?

If you’re not satisfied with the course, just send me an email and I will refund your money. This being a beta, though, I reserve the right to ask questions ;)