Basic Redux Explained to a Child

Recently I was tasked with creating a React application using Redux. Beginning this project I had barely any experience with React and the Redux portion led to some very stressful troubleshooting issues. My goal with this article is to help explain Redux yet another way. My intention is to describe it such that a child could understand it. This is what it took for me. I would encourage you to study the source directly which is documented very well. I will merely be discussing my misconceptions and where I had issues grasping the principles. https://redux.js.org/

Redux is a state management tool. When passing a lot of data around your application and using many different components it can quickly become hard to manage the data, in this case, what we would call “state.” The idea of Redux is that you will create a single source of truth for your data. This will allow you to create extremely complex applications and allow certain components access to this state whenever needed.

Store

Typically in your React application, you would be setting the state of your data and updating that as needed. An example would be that the state of your “comments” are an empty string. As a user adds a comment then that state is updated to be the contents of the comment that the user entered. The principle is the same in a Redux Store, however that state will now exist in the store, which we will initialize at the top of our application. Imagine that your state(data) will exist in its own world separate from your application. You will access the state as needed. Not every component will need access to all kinds of data. This allows us the ability to create faster and more efficient applications by connecting only the necessary apps to the store.

Action Creators

We will obviously want to update the state. This will require action! My confusion officially began around this portion of trying to understand Redux. Simply put an action describes what is happening. We would want to call this the type. The type is generally written as such: type: ‘ADD_COMMENT’. What do you think this action is wanting to do? Well yes, add a comment! Writing the type simply helps us understand what is trying to be done. Don’t overcomplicate this in your head when starting out. This is so corny but imagine this. The thief wants to add a comment to his vault. He can’t do it alone. He has the muscle. Now he needs…the brains. (I told you this would be for a child.)

Reducers

The thief(action creator) needs to get into the vault(the store). He can’t do this directly and needs a partner. The partner is the reducer who will access the vault(store) and add comments to it.

Okay, that is enough of that. But truly thinking of it this way helped me. The reducer will take the state and the action and will produce a new state. This is important to mention that this is a NEW state. We will never reassign the state due to the fact that it can possible create massive bugs and errors along the way. We will always create copies of the original state and then update it and return the newly updated state. This is why you will often see the spread operator used in Redux because it helps in doing just that.

The reducer knows how to update the state and will interface with it directly. Now below I have some example where you can see in a real application how these may look. The syntax will come over time, but see where they connect.

In this action, you will see that we are looking at the “type” to describe what we want to do.

In this lengthy reducer assigned to Users you will easily locate the case which is mentioning the “LOGIN_FORM_CHANGE” and know what that is trying to do.

Looking at real-world examples of this code is very important. The syntax often becomes very complex compared to beginner examples. Although there is much additional code here I hope you can walk away with the high-level understanding of what the store, action creators, and reducers entail.