Redux: As a beginner

Hello everyone👋,

I am a Junior Front-End Web Developer, and I have decided to document my journey learning new technologies in front-end development and beyond.

My first article will be about Redux JS, a state management tool that helps us manage the state of our app. But what exactly is state?

State is defined as an object that stores data or information about a component in ReactJS. Whenever data in the state changes, React will "react" to this change and the component will re-render. In simple terms, state is a box where we store our component's data/properties.

There are many ways to control and manage the state of a component. When a component's size is small, it is easy to control its data using simple built-in hooks like useState. The problem begins when many components need to communicate with each other in different parts of our app.

In these cases, the state is called global because it is not contained in only one component but is useful in many more. To avoid messing up the state, we need a way to control all of these different global boxes📦 (state). That's where Redux comes in handy.

Redux makes it easier to understand when, where, and how the state in your application is being updated, and how your application logic will behave when those changes occur.

Think of it like a warehouse🏭 that powers many different stores🛒 in a town. All of them need products, so when a store (component) needs to restock (update the state), Redux provides patterns and tools to help with the process.

However, be careful. If there are only a limited number of stores, there is no need for the warehouse to exist in the first place. That being said, you should consider using Redux only if it is needed—if the state is getting out of hand with complexity, or many different components need to communicate and use the same state—otherwise, you will make things more difficult than they have to be.

For technical details, you can visit the official documentation for Redux Toolkit (the preferred way to use Redux, with less boilerplate code and easier setup): Redux Toolkit Documentation.