Программирование • 26 февраля 2025 • 5 мин чтения

Что такое Redux? Полное руководство для начинающих

Рассказываем, что такое Redux, разбираем основной функционал этой библиотеки и приводим примеры её использования.

Что такое Redux и для чего он нужен

Redux — одна из наиболее популярных библиотек для управления состоянием в приложениях на JavaScript и TypeScript. Суть использования Redux в том, что все данные сосредоточены в глобальном хранилище и изменения происходят предсказуемо, с использованием чётко определённых механизмов. Это особенно важно при работе с масштабными проектами.

В небольших приложениях достаточно использовать локальное состояние, например useState в React. Однако с масштабированием проекта управление данными усложняется: приходится передавать состояние через пропсы, что затрудняет поддержку и усложняет код. Redux снимает эти трудности, предоставляя единое хранилище для данных.

Применять эту библиотеку рекомендуем в следующих ситуациях:

● в сложных одностраничных приложениях (SPA) с динамическим обновлением состояния — например, в панелях администрирования, где отображаются таблицы данных;
● в проектах с массой взаимосвязанных и вложенных компонентов, где сложно вручную передавать состояние между ними;
● когда требуется отслеживать историю преобразований состояния — например, в финансовых приложениях или текстовых редакторах, где важно иметь возможность откатиться к предыдущему состоянию;
● в мобильных приложениях на React Native, где управление состоянием важно для синхронизации между экранами.

Redux базируется на трех китах:

1. Все состояния хранятся в одном объекте (store). Это как большая коробка, где есть всё, что нужно для работы приложения. Такое решение значительно упрощает управление этими данными и их настройку.
2. Состояние должно быть доступно только для чтения — изменения возможны только через специальное действие actions. Это делает поведение приложения более предсказуемым, так как программист точно знает, после какого действия изменились данные.
3. Изменения в состоянии происходят только через чистые функции, которые называются редукторами, или редьюсерами (reducers). Эти функции берут текущее состояние и действие и возвращают новое состояние. Такой подход улучшает стабильность кода и упрощает его тестирование.

Использование Redux помогает избежать путаницы с передачей данных между компонентами, что особенно важно в больших приложениях.

Научиться работать с React и Redux можно на курсе «Фронтенд-разработчик». Он включает мощный набор инструментов и более 500 задач, повторяющих реальные рабочие условия. Учим только тому, что пригодится для решения настоящих задач.

Основной функционал Redux

Рассмотрим главные возможности этой библиотеки.

Хранилище (Store) — место, где лежат все данные приложения.
Действия (Actions) — объекты, описывающие всё происходящее в приложении (например, пользователь нажал кнопку или сменил настройки). Обязательная часть действий — поле type, которое определяет тип действия.
Редукторы/редьюсеры (Reducers) — специальные функции, которые обрабатывают отправленное действие и создают новое состояние. Они должны быть чистыми, то есть не изменять входные параметры и не выполнять лишних действий, чтобы не создавать путаницу.
Диспетчеризация (Dispatch) — способ отправки действий в хранилище. Компоненты вызывают dispatch(action), чтобы изменить состояние. Это основной механизм обновления данных в Redux.
Подписка (Subscribe) — механизм, позволяющий компонентам получать обновления состояния. Компоненты подписываются на изменения и автоматически обновляются при их наступлении.
Мидлвары (Middleware) — функции, расширяющие возможности Redux, например для обработки асинхронных действий, логирования или кеширования информации. Самые популярные мидлвары — это Redux Thunk и Redux Saga.
Селекторы (Selectors) — специальные функции, которые помогают вытаскивать конкретные данные из общего состояния. Их можно представить как помощников, которые находят нужную информацию, так что программисту не приходится самому лезть в коробку и рыться в ней.
Комбинирование редукторов (Combine Reducers) — возможность разбить логику управления состоянием на отдельные модули (коробки), чтобы управлять каждым из них по отдельности. Это помогает делать код более понятным и удобным, особенно когда приложение становится больше.
Инструменты разработчика (Redux DevTools) — инструмент наподобие увеличительного стекла, который позволяет видеть все изменения в состоянии в процессе работы приложения. Если что-то пошло не так, можно откатиться назад и понять, что случилось.

Преимущества Redux

✅ Централизованное управление состоянием — все данные хранятся в одном месте, что упрощает доступ к ним и поддержку приложения. Компоненты не обмениваются данными напрямую, а получают их из глобальной «коробочки».

✅ Предсказуемость изменений — состояние изменяется только через редукторы, что делает логику обновления прозрачной и упрощает работу.

✅ Инструменты для отладки — благодаря Redux DevTools можно отслеживать каждое изменение состояния, видеть цепочку действий, воспроизводить изменения и анализировать производительность.

✅ Гибкость — Redux можно использовать не только с React, но и с другими фреймворками и библиотеками, например с Angular или Vue.js. Это универсальный инструмент для управления состоянием.

✅ Лёгкость тестирования — редукторы, или редьюсеры, представляют собой чистые функции, которые легко тестировать. Они не зависят от окружения и всегда дают предсказуемый результат при одних и тех же входных данных.

✅ Обработка асинхронных данных — с помощью middleware (Redux Thunk, Redux Saga) можно легко управлять асинхронными операциями, например загрузкой данных с сервера, обработкой ошибок и кешированием.

✅ Удобное масштабирование — чёткая структура данных и модульный подход позволяют легко расширять функциональность приложения без нарушения существующего кода.

✅ Уменьшение количества пропсов — компоненты получают данные напрямую из хранилища, что снижает сложность передачи состояния через пропсы и повышает читаемость кода.

✅ Повышенная производительность — благодаря использованию селекторов и мемоизации можно оптимизировать работу приложения и избежать лишних ререндеров компонентов.

✅ Совместимость с серверным рендерингом (SSR) — Redux позволяет передавать начальное состояние с сервера, что делает возможным рендеринг на стороне сервера в приложениях на Next.js или в других фреймворках.

Как установить Redux и начать работать

1. Чтобы установить Redux и React-Redux, выполним в терминале команду:

npm install redux react-redux

2. Создадим хранилище в файле store.js:

import { createStore } from 'redux';
const store = createStore(myReducer);

Редуктор myReducer мы создадим далее.

Также важно отметить, что как альтернативный вариант можно использовать configureStore из библиотеки Redux Toolkit, но описанный выше метод также будет работать.

3. Сделаем провайдер для передачи хранилища в React-приложение. Для этого обернём корневой компонент приложения в компонент Provider из react-redux:

import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);

Пример применения библиотеки

Разберём на примере, как при помощи Redux создать ту-ду-лист.

1. Создаём actions, не забывая про обязательное поле type:

const addTask = (task) => ({ type: 'ADD_TASK', payload: task });
const removeTask = (id) => ({ type: 'REMOVE_TASK', payload: id });

2. Далее создаём reducer:

Редуктор по умолчанию должен возвращать новое состояние. Поэтому если мы не распознали тип действия, то возвращаем старое значение.

3. Подключаем к React компонент, используя хуки useSelector и useDispatch из react-redux. В итоге любой наш компонент сможет отправлять действия через useDispatch и получать данные из store с помощью useSelector .

import { useSelector, useDispatch } from 'react-redux';
import { useState } from 'react';

function TodoList() {
const tasks = useSelector(state => state.tasks);
const dispatch = useDispatch();
const [task, setTask] = useState('');

return (

<input type="text" value={task} onChange={(e) => setTask(e.target.value)} />
<button onClick={() => dispatch(addTask(task))}>Добавить задачу</button>

{tasks.map(t => (

{t.text} <button onClick={() => dispatch(removeTask(t.id))}>Удалить</button>

))}

);
};

Совет эксперта

Руслан Посевкин, software engineer
Если ваш проект не требует глобального управления состоянием, рекомендую использовать локальное состояние (useState в React). Однако в сложных приложениях Redux значительно облегчает управление данными, главное — правильно организовать логику работы с хранилищем.

Также важно правильно организовать структуру файлов в проекте. Разделяйте логику Redux по модулям, чтобы не перегружать один файл. Например, создавайте отдельные файлы для actions, reducers и selectors.
Освоение Redux потребует времени, но оно того стоит. Успехов в изучении!

Статью подготовили: