JS: Redux (React)
2026-02-21 02:58 Diff
https://hexlet.io/courses/js-redux/lessons/redux/theory_unit

Redux is somewhat like a database in the program. Inside itself, it stores the application data or the global state. Redux is only responsible for the data and has nothing to do with the browser, the DOM, or the front end. Theoretically, we can use Redux even for backend development in Node.js.

From the code's perspective, Redux is an object that contains data. The rest of the application uses it to store, modify, and retrieve data. In Redux terminology, it's called a store because the data are stored internally.

In the simplest case, an ordinary JavaScript object would be suitable for solving such a problem:

However, this approach does not allow you to track data changes. If some part of the application has changed the data, then we won't know about it, which means we won't be able to react, for example, by rerendering the necessary part of the screen. Redux solves this problem.

Changing the data inside the store generates events that you can subscribe to and execute any logic, usually redrawing the screen. It works like this because we change the data inside Redux by indicating actions, not directly like with other objects.

Below is a complete example using Redux:

The only way to make state changes to the store is to pass/send an action to the dispatch() function.

An action is a regular JavaScript object with at least one property – type. There are no restrictions imposed on the contents of this property. The main thing is that the reducer has a suitable handler in the switch.

We describe the process of changing the state inside the reducer. Outside we only say what change to perform. This approach is very different from what we did in React, where the state change happens directly:

Let's look at another example using an array and passing data through an action:

Even though the payload key is optional, and you can put all the data directly into the action, we highly recommend not doing that. Mixing statically defined keys with dynamic ones in one object is a bad idea. In future lessons, we'll use libraries that require us to work this way.

How to set up Redux

It only takes seven lines to write the simplest version of Redux. Here they are:

Initial state

We have already mentioned that we set the initial state is set in the definition of the reducer:

But this isn't enough sometimes. The data may come from the backend, so we should load it into the store before working with it. There's something you can do in Redux in this case:

Redux dispatches a specific action that we cannot intercept. If the reducer is implemented correctly and contains a default section in the switch, the store will be filled with data from initState:

In the code above, the createStore() function will call the reducer this way: reducer(100, '@@redux/INIT'). Then we will execute the default branch, and the state will be 100.

Three principles

Let us summarize the main things about Redux:

  • Single source of truth. When we use Redux, we work with only one store per application. The whole state is in one place
  • The state is read-only. The only way to change the state is to send an action inside the store
  • Changes are made with pure functions. Inside the repository, we can use only pure functions to be able to time travel