How Does Redux Work?

6 min readDec 8, 2018

I was recently given a scenario during an interview regarding how Redux would work with a basic To Do application. I needed to walk the interviewer through what happens the moment an input field is filled and the submit button is clicked. What made this a little more difficult was that I didn’t have a computer in front of me. In fact, all I had was a pen — which he offered to me — and the back of my resume to write on.

With the pen in my hand, I sat there for a few seconds and thought about it.

I had been here before — the deer in the headlights of the technical portion of an interview. Fortunately, I had already gotten over the hump of bombing my first few technical interviews so it wasn’t so bad.

The reality is that interviewing is a skill, and the only way to get better at them is to fail so that way you could recognize your weaknesses going forward. Which is why I like to write about what I’m asked on interviews. It forces me to go into deep dives and get better. Which is what I recommend anyone to do.

Always keep learning.

First, what is Redux?

As described by the actual Redux docs:

Redux is a predictable state container for JavaScript apps. (Not to be confused with a WordPress framework — Redux Framework.)
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies).

In short, Redux allows you to manage state for your web applications built in any JavaScript framework such as React, Meteor, or Angular.

Redux evolved from the idea of Flux — an architecture pattern created by the Engineers at Facebook.

What makes Redux so Special?

In short, Redux gives you a single object that holds the state for your entire application in one location — that could include data from your backend API or an external API, state for navigation, a user’s information, toggled state of a button, and so on.

This is powerful because it allows easier scalability and the ability to quickly diagnose bottlenecks, asynchronous issues, or errors.

How Does it Work?

The core concepts of Redux — Store, Actions, Reducers, and Subscriptions.

Initial State

The initial state is what it looks like at the start.

Think about the shelves of a grocery store as you walk down the aisles — what do you see? There are canned foods, fruits, bread, milk, and — if you live in New York City — a bodega cat.

Actions/Dispatches

Next we need to enter the bodega so that we can buy some food. With Redux, every action can alter the initial state — which means anything you do can change something around you.

Every time an action takes place, it’s called being dispatched.

Reducers

We now have actions that can allow us to enter the store and interact with it, but now we need something that can interpret these actions.

That’s what reducers are.

Reducers take in the argument of the state set to the default initial state and the action. This action helps the reducer determine what needs to be done with the state.

Store

We have our list of actions and our reducer that can handle our actions. In other words, we can now fully interact with the bodega once we’re inside of it. However, we need one last step — our Store. This is where the state is contained. In order to create one, you need a reducer and initial state.

Redux — Store

You can now grab the Bodega object from the store at any point using store.getState(). Let’s do that while walking through every action/dispatch:

You can also subscribe to the store for any changes or updates. This can be very useful as it actively listens for any actions that are dispatched that potentially change the state.

In the above, while the bodega cat’s mood remains neutral, the first console.log will return until it the PET_BODEGA_CAT action is dispatched.

Applying it to the To Do Application

So now that we have a basic understanding of how Redux works — Actions are Dispatched to the Reducers which alter the initial state within the Store — we can apply these to the To Do application.

Initial State

First, we need a place to store all the To Dos on our list. We will use an array:

Actions/Dispatches

Next we need an Action to Dispatch to the Reducer. This is a little different than what we did above because this time we’re taking a dynamic value. In other words, we’re grabbing the value from an input field that’s being submitted on a form to our list. In this case, our action needs to be able to take an argument:

Reducers

We now need a reducer to be able to determine what to do with this action!

Redux — Reducer — Handles an Action that’s Dispatched and Alters the State

In the above, the Action ADD_TODO is called. Once it hits the reducer, the reducer determines that it matches with the case ADD_TODO and then proceeds to take the the value from action.toDo (which is a string) and adds it to the array toDos: