Register to get access to free programming courses with interactive exercises

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

Hexlet Experts

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

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
hours of theory

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing:">Bookmate</span>
<span class="translation_missing" title="translation missing:">Healthsamurai</span>
<span class="translation_missing" title="translation missing:">Dualboot</span>
<span class="translation_missing" title="translation missing:">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Frontend Developer icon
Development of front-end components for web applications
start anytime 10 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.