Redux for Dummies: Yes, Virginia, There Is Still Hope!

I just finished my whirlwind tour through React and Redux on the wings of code school. The “flight” was bumpy and I had to reach for the barf bag more than once, but I somehow landed in one piece. I even got through my final solo project, an E-Bay clone, which to my surprise passed muster at graduation--with one glaring omission. The assignment had been to use a Ruby on Rails backend plus a React frontend that included Redux. I remember not being able to make much sense out of Redux in those last 3 weeks of code school when it was presented. In addition, there was the pressure of a deadline so I just skipped putting Redux into my app, made a “Hail Mary” pass in my app’s architecture and hoped for the best.

But now, 2 months after graduation from code school, the dust has settled and I want to fill in the blanks of stuff I didn’t get to during class but wish I did. Redux is one of those holes we’ll begin to fill in today.

I have a background as a teacher, so I do know something about how to learn and teach. One of the things I’ve discovered about learning to code is that when I don’t understand something, it generally means it’s been presented too abstractly and I need to bring it down a notch--or two or three. For example, when I first learned what looping was in Javascript, I sat on the floor with paper dolls I had cut out and then moved them around to physically experience this “looping” thang. Well, it worked. Once I was done with the paper dolls, I was able to abstract away the concept of looping in real JS code. And today, I am proud to say I can loop through an array with one hand tied behind my back!!

So let’s get cracking on “cracking open” Redux! Today will just be about the main concepts of how to set up Redux from the point of view of a React app. We will not do any actual coding (You’ll have to come back next week for Part II to see that!).

I’m going to assume we all know at least why we would bother with Redux at all. It really comes in handy with larger React apps where “state” can “live” in several components. It can become cumbersome to have to manage the comings and goings of state that can be held in various places. So with Redux, we will have a way to centralize “state”, so that there is only one place we have to go when we want to either access or change “state”.

To add Redux to your React app, we need four things:

1. The first thing we need is what I’ll call a “Secret Agent.” Secret Agent is the one who will do the “bidding” of her employer, the “state”. For the Secret agent to do her job, she’ll need two things: 1) she’ll need to know what the current state of her employer is and 2) what action she should take. The action Secret Agent takes will cause some kind of change to “State” (to whom she is loyal!).

2. We have to know what government the Secret Agent is working for. By knowing this, our Secret Agent will know where to go to access the information she needs to carry out her duties.

3. In order to be effective, Secret Agent has to have a method of communication with her employer.

4. The very last thing Secret needs to do is to execute her assigned action.

Now let’s go over that over more time. But this time, I’m going to clue you into the secret code words that Secret Agent uses to refer to all these things.( You’re sworn to secrecy!)

1. Our Secret Agent’s code name is Reducer. Sounds scary! As we said, Secret Agent, aka Reducer, needs to know the current State of her employer, and she needs to know what Action she’s being directed to take.

2. Reducer needs to know what government is employing her (this time!). Because her employer changes so often from app to app, she just nicknames her employer “The Store” or Store for short. Store hired Reducer to carry out its dirty work!

   1. We said Reducer needs to be able to communicate with her employer, Store. The code word Reducer uses for that communication link is Subscribe.

3. Lastly, our fearless Reducer needs to carry out her assigned action. The code word she’s waiting for to give her the final “go-ahead” to carry out her assigned action is Dispatch.

Ok, I said “lastly” in the section above, but I lied. You'll need the following condensed Cliff Notes version of the Redux recipe outlined above so you can write it in invisible ink on the soles of your feet!

1. Reducer needs State and Action.

2. Conversely, the government entity, or Store, needs a Reducer and State.

3. We need Subscribe so that Reducer and Store can communicate.

4. We need a Dispatch command to put Action in motion.

And that is it! You now have your overview of the very essentials of Redux. Follow me next time when we code up those four steps.

Until then,

Keep coding up your dreams!