Register to get access to free programming courses with interactive exercises

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

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
Development of front-end components for web applications
10 months
from scratch
Start at any time

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.