React: Redux Toolkit
2026-02-21 02:56 Diff
https://hexlet.io/courses/js-redux-toolkit/lessons/integration/theory_unit

In this lesson, we'll build a simple application with two buttons that change the counter value. It will allow you to see the basic concepts of the Redux Toolkit.

Let us try to integrate it. We need two packages — react-redux and the toolkit itself:

Before we start putting the puzzle together, let's look at the directory structure that we'll start from. This structure is the simplest, but not the only possible one:

Let's start at the top level. Here we need the <Provider> component, which contains the repository and sneaks it deep into the component tree via the context:

We initialize the repository using the configureStore() function. It knows how to combine reducers independently, unlike in Redux. As input, it takes an object with the reducer key, the value of which is an object with reducers:

The reducers themselves are in the slices directory. Toolkit introduces a new concept — a slice which combines Reducers, Actions, and more. We'll talk more about it in the next lesson, but now we will see the code example:

Now the most important thing, let's look at the Toolkit in action. Here we rely on hooks. As before, to change the state in the repository, we must pass an action to the dispatch() function. We use the useDispatch() function to get the dispatch:

And here's a real-life example:

See the Pen js_redux_toolkit_integration-1 by Hexlet (@hexlet) on CodePen.

You do some of this initialization once and then seldom change it because you will add the majority of application code in components and slides. Unlike pure Redux, there will be much less of this code, thanks to slices and the ability to mutate data within reducers. More on this we are going to discuss in the next lesson.