Understanding Redux - Part 1

This is a comprehensive (but simplified) guide for absolute Redux beginners, or any who wants to re-evaluate their understanding of the fundamental Redux concepts.

This article (which is actually a book) is the missing piece if you’ve long searched for how to master Redux .

Before getting started, I should tell you that the book is first and foremost about me. Yes, me. My struggles with learning Redux, and seeking a better way to teach it.

A few years ago, I had just learned React. I was excited about it, but again, everyone else seemed to be talking about something else called Redux.

Gosh! Does the learning streak ever end?

As an Engineer committed to my personal development, I wanted to be in the know. I didn’t want to be left out. So, I began to learn Redux.

I checked the Redux documentation. It was pretty good, actually! For some reason, it just didn’t entirely click for me. I checked a bunch of YouTube videos as well. The ones I found just seemed rushed and not detailed. Poor me.

Honestly, I don’t think the video tutorials I watched were bad. There was just something missing. An easy guide that was well thought-out and written for a sane person like me, and not for some imaginary humanoid.

It appeared I wasn’t alone.

A good friend of mine, someone I was mentoring at the time, had just completed a React Developer Certification course where he paid big bucks (over $300) to earn a certificate.

When I asked for his honest feedback on the program, his words were along the lines of:

The course was pretty good, but I still don’t think Redux was well explained to a beginner like me. It wasn’t explained that well.

You see, there are many more like my friend, all struggling to understand Redux. They perhaps use Redux, but they can’t say they truly understand how it works.

I decided to find a solution. I was going to understand Redux deeply, and find a clearer way to teach it.

What you are about to read took months of study, and then some more time to write and build out the example projects, all while keeping a daily job and other serious commitments.

But you know what?

I’m super excited to share this with you!

If you’ve searched for a Redux guide that won’t talk over your head, this is it. Look no further.

I have taken into consideration my struggles and those of many others I know. I’ll make sure to teach you the important stuff — and do so without getting you confused.

Now, that’s a promise.

My Approach to Teaching Redux

The real problem with teaching Redux — especially for beginners — isn’t the complexity of the Redux library itself.

No. I don’t think that is it. It is just a tiny 2kb library — including dependencies.

Take a look at the Redux community as a beginner, and you’re going to lose your mind fast. There’s not just Redux, but a whole lot of other supposed “associated libraries” needed to build real world apps.

If you’ve spent some time doing a bit of research, then you’ve come across them already. There’s Redux, React-Redux, Redux-thunk, Redux-saga, Redux-promise, Reselect, Recompose and many more!

As if that’s not enough, there’s also some Routing, Authentication, Server side rendering, Testing, and Bundling sprinkled on it — all at once.

Gosh! That is overwhelming.

The “Redux tutorial” often isn’t so much about Redux, but all the other stuff that comes with it.

There’s got to be a more sane approach tailored towards beginners. If you’re a humanoid developer, you certainly wouldn’t have issues with this. Guess what? Most of us are actually humans.

So, here’s my approach to teaching Redux.

Forget about all the extra stuff for a bit, and let’s just do Redux. Yeah!

I will only introduce the barest minimum you need for now. There will be no React-router, Redux-form, Reselect, Ajax, Webpack, Authentication, Testing, none of those — for now!

And guess what? That’s how you learned to do some of the important life “skills” you’ve got.

What does, Understanding Redux - 1 cover?

• Covers the basics super well
•  A deep understanding of the core Redux terminologies
•  How to refactor an existing React application to use Redux
•  Learn to set up a Redux project from scratch
•  How to structure your Redux code
•  Handling typos and duplicates
•  Setting up a Redux store
•  Getting to know the Redux reducer - and why it is called a "reducer"
•  Updating the UI in response to dispatched actions
•  Keeping a normalized state, and what that really means in plain, approachable language.

What does, Understanding Redux - 2 cover?

• How to manage the Redux state like a pro
•  Persisting Redux state
•  Fetching data via Ajax and dealing with async action creators
•  Introducing the Redux devtools, logging and time travel
•  Handling dynamic action types
•  Understanding the Redux Middleware
•  Creating custom middleware to centralise functionalities within your Redux application
•  Advanced error handling in a Redux app
•  Using react-redux for more performant UI rendering
•  Why immutability is important, and advanced ways to deal with immutability in Redux apps.
•  A good look at Higher order components
•  Understanding the common redux-related libraries. Think reselect, redux-thunk, redux-promise, redux-persist etc.
•  Routing via redux-router
•  How to handle authentication in Redux apps
•  How to chain and cancel API requests
• and much more ...

What does, Understanding Redux - 3 cover?

•  Managing test files and directories
•  Testing Actions, Reducers and Middleware for more stable software
•  Writing Integration tests
•  Understanding advanced concepts in the Redux Store, Actions and Reducer
•  Using the Redux-ORM like a champ
•  Handling connecting form components
•  Handling monster forms in Redux
•  The correct way to handle context menus in Redux
•  The do's and dont's of server-side rendering with Redux