What is Redux and how does it work?

You might be trying to solve Redux problems while learning React. Kitze explains this better in the first minute of this video, where he gives some tips for those of us who are just starting in the world of React.

What is Redux?

Redux is a JavaScript library that allows you to manage the state of an application. We could also say that it's a data architecture pattern that allows state management. Although it's commonly associated with React, Redux is an agnostic JavaScript library, so it's very likely that you'll encounter Redux in Angular projects.

⭐️ Find jobs that require Redux as a requirement

When we create applications in React, they are organized as a series of nested components, their nature is functional. In other words, they receive information through their arguments (props) and pass the information through their return values, and this is called: one-way binding, data is only transmitted from components to their children:

Let's look at an example of how React would behave with and without Redux.

So, let's imagine that in our component D we have an input that stores certain information in a state. This information will be available for the entire component D and its children, but what would happen if we need that information to also be present in component E?

One solution would be to declare the state in component B (parent), that way we will have access to the information from component D and E (children):

Following the same logic, what would happen if I need to have access to that information throughout my application? Well, then I declare the state in the parent of all components:

When you're learning React, doing it this way is a good way to understand how props and components work, but it's not a practice you want to repeat for large projects, because this brings other problems like Prop Drilling.

So, we need to have all that information in one place, so that it can be available in all our components, something like our single source of truth:

Having all that information in our Redux states, all our components will have access to the same information at all times.

Earlier we mentioned that Redux is an architecture pattern and we saw Redux as a blue box that stores states. Let's now see what we have inside our blue box and how it works:

You might be facing a salad of new concepts, and it can be confusing, I tell you from experience. My recommendation is that you take the time necessary to understand what the Redux flow is, in a next post we will see the code behind our Redux architecture in a pet project.