Introduction — JS: Redux (React)

As your application grows, several inconveniences start to appear quite quickly. One of the most annoying is bringing the state to the top through callbacks after we have sent it down to the bottom. We have to send not only callbacks but also any data. It turns out that many intermediate components act as a proxy, meaning they pass unused data through themselves.

Secondly, rendering and logic get mixed up in one place, quickly bloating components and making them hard to understand. It adds uncontrolled side effects mixed with data updates.

To solve these problems, state managers started to appear. One of them, Redux, became official, i.e., supported by Facebook. By itself, Redux is a simple library designed purely for state management React. Nevertheless, it doesn't depend on React. We can use it with anything. For example, we can connect it with React with the help of Redux Toolkit, which carries out the necessary integration.

In addition to solving the above problems, Redux and its ecosystem bring some extras:

• Time traveling. The ability to travel through state changes back and forth is helpful for debugging
• Convenient debugging and visualization. We can extend Redux via Middlewares with a toolkit that provides extremely convenient tools for debugging and visualizing what's happening inside the processes. We will look at them more soon so we can immediately start using the full power of Redux
• Thanks to the standardization of working with a state that Redux has brought, it's now possible to automate almost all aspects of operation in React. Working with forms, routing, asynchrony, history, and more

In this course, we'll go through the main features of Redux and integrate many different libraries into the application we create. We won't be able to dig deep into them since the volume of documentation for each library is like a whole book, but we'll always analyze the most basic use cases.

The main topics of this course are:

• Redux
• Redux Toolkit
• Middlewares
• Containers
• Actions (Async)
• Redux & React

---

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“