Introduction — JS: Redux (React)

Despite the power of React, as your application grows, a number of inconveniences start to appear quite quickly. One of the most annoying is bringing the state to the top through callbacks that need to first be sent all the way down to the bottom. You have to send not only callbacks, but also any data. It turns out that many intermediate components act as a proxy, i.e., 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. This 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 itself. By itself, Redux is a very simple library designed purely for state management. Although it was designed to be used in React, it doesn't depend on it and can be used with anything. To connect it with React, you'll need the Redux Toolkit, which carries out the necessary integration.

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

• Time traveling. The ability to travel through state changes back and forth. Very useful when debugging, you always have the ability to rewind (literally).
• Convenient debugging and visualization. Redux is extended via Middlewares with a toolkit that provides extremely convenient tools for debugging and visualizing what's happening inside the processes. We'll look at them more in the near future so we can immediately start using the full power of Redux.
• Thanks to the standardization of working with 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 basic use cases.

Main topics:

• 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.