6 added
56 removed
Original
2026-01-01
Modified
2026-02-28
1
-
<p><p>Программирование • 26 февраля 2025 • 5 мин чтения</p>
1
+
<h2>Подтвердите, что запросы отправляли вы, а не робот</h2>
2
-
<p>Рассказываем, что такое Redux, разбираем основной функционал этой библиотеки и приводим примеры её использования.</p>
2
+
<p>Нам очень жаль, но запросы с вашего устройства похожи на автоматические. <a>Почему это могло произойти?</a></p>
3
-
<h2>Что такое Redux и для чего он нужен</h2>
3
+
<p>Я не робот Нажмите, чтобы продолжить</p>
4
-
<p>Redux - одна из наиболее популярных библиотек для управления состоянием в приложениях на JavaScript и TypeScript. Суть использования Redux в том, что все данные сосредоточены в глобальном хранилище и изменения происходят предсказуемо, с использованием чётко определённых механизмов. Это особенно важно при работе с масштабными проектами.В небольших приложениях достаточно использовать локальное состояние, например useState в React. Однако с масштабированием проекта управление данными усложняется: приходится передавать состояние через пропсы, что затрудняет поддержку и усложняет код. Redux снимает эти трудности, предоставляя единое хранилище для данных.Применять эту библиотеку рекомендуем в следующих ситуациях:● в сложных одностраничных приложениях (SPA) с динамическим обновлением состояния - например, в панелях администрирования, где отображаются таблицы данных;● в проектах с массой взаимосвязанных и вложенных компонентов, где сложно вручную передавать состояние между ними;● когда требуется отслеживать историю преобразований состояния - например, в финансовых приложениях или текстовых редакторах, где важно иметь возможность откатиться к предыдущему состоянию;● в мобильных приложениях на React Native, где управление состоянием важно для синхронизации между экранами.Redux базируется на трех китах:<b>1. Все состояния хранятся в одном объекте</b>(store). Это как большая коробка, где есть всё, что нужно для работы приложения. Такое решение значительно упрощает управление этими данными и их настройку.<b>2. Состояние должно быть доступно только для чтения</b>- изменения возможны только через специальное действие actions. Это делает поведение приложения более предсказуемым, так как программист точно знает, после какого действия изменились данные.<b>3. Изменения</b>в состоянии происходят только через чистые функции, которые называются редукторами, или редьюсерами (reducers). Эти функции берут текущее состояние и действие и возвращают новое состояние. Такой подход улучшает стабильность кода и упрощает его тестирование.Использование Redux помогает избежать путаницы с передачей данных между компонентами, что особенно важно в больших приложениях.Научиться работать с React и Redux можно на<a>курсе "Фронтенд-разработчик"</a>. Он включает мощный набор инструментов и более 500 задач, повторяющих реальные рабочие условия. Учим только тому, что пригодится для решения настоящих задач.</p>
4
+
<p><a>SmartCaptcha by Yandex Cloud</a></p>
5
-
<p>Станьте фронтенд-разработчиком с нуля</p>
5
+
<p>Если у вас возникли проблемы, пожалуйста, воспользуйтесь <a>формой обратной связи</a></p>
6
-
<p>Освойте фронтенд-разработку - с нуля за 10 месяцев. Будет много практики на реальных проектах, чтобы вы могли сразу стартовать в IT.⦁ 9 проектов в портфолио и 500+ задач;⦁ помощь с поиском работы до 7 месяцев после выпуска;⦁ приглашения на собеседования чаще на 38% и зарплата выше на 9%*</p>
6
+
<p>8256466244644648232:1772298376</p>
7
-
<h2>Основной функционал Redux</h2>
8
-
<p>Рассмотрим главные возможности этой библиотеки.</p>
9
-
<ol><li><b>Хранилище (Store)</b>- место, где лежат все данные приложения.</li>
10
-
<li><b>Действия (Actions)</b>- объекты, описывающие всё происходящее в приложении (например, пользователь нажал кнопку или сменил настройки). Обязательная часть действий - поле type, которое определяет тип действия.</li>
11
-
<li><b>Редукторы/редьюсеры (Reducers)</b>- специальные функции, которые обрабатывают отправленное действие и создают новое состояние. Они должны быть чистыми, то есть не изменять входные параметры и не выполнять лишних действий, чтобы не создавать путаницу.</li>
12
-
<li><b>Диспетчеризация (Dispatch)</b>- способ отправки действий в хранилище. Компоненты вызывают dispatch(action), чтобы изменить состояние. Это основной механизм обновления данных в Redux.</li>
13
-
<li><b>Подписка (Subscribe)</b>- механизм, позволяющий компонентам получать обновления состояния. Компоненты подписываются на изменения и автоматически обновляются при их наступлении.</li>
14
-
<li><b>Мидлвары (Middleware)</b>- функции, расширяющие возможности Redux, например для обработки асинхронных действий, логирования или кеширования информации. Самые популярные мидлвары - это Redux Thunk и Redux Saga.</li>
15
-
<li><b>Селекторы (Selectors)</b>- специальные функции, которые помогают вытаскивать конкретные данные из общего состояния. Их можно представить как помощников, которые находят нужную информацию, так что программисту не приходится самому лезть в коробку и рыться в ней.</li>
16
-
<li><b>Комбинирование редукторов (Combine Reducers)</b>- возможность разбить логику управления состоянием на отдельные модули (коробки), чтобы управлять каждым из них по отдельности. Это помогает делать код более понятным и удобным, особенно когда приложение становится больше.</li>
17
-
<li><b>Инструменты разработчика (Redux DevTools)</b>- инструмент наподобие увеличительного стекла, который позволяет видеть все изменения в состоянии в процессе работы приложения. Если что-то пошло не так, можно откатиться назад и понять, что случилось.</li>
18
-
</ol><h2>Преимущества Redux</h2>
19
-
<p>✅<b>Централизованное управление состоянием</b>- все данные хранятся в одном месте, что упрощает доступ к ним и поддержку приложения. Компоненты не обмениваются данными напрямую, а получают их из глобальной "коробочки".</p>
20
-
<p>✅<b>Предсказуемость изменений</b>- состояние изменяется только через редукторы, что делает логику обновления прозрачной и упрощает работу.</p>
21
-
<p>✅<b>Инструменты для отладки</b>- благодаря Redux DevTools можно отслеживать каждое изменение состояния, видеть цепочку действий, воспроизводить изменения и анализировать производительность.</p>
22
-
<p>✅<b>Гибкость</b>- Redux можно использовать не только с React, но и с другими фреймворками и библиотеками, например с Angular или<a>Vue.js</a>. Это универсальный инструмент для управления состоянием.</p>
23
-
<p>Базово о React: что это такое и как помогает разработчику</p>
24
-
<a></a><p>✅<b>Лёгкость тестирования</b>- редукторы, или редьюсеры, представляют собой чистые функции, которые легко тестировать. Они не зависят от окружения и всегда дают предсказуемый результат при одних и тех же входных данных.</p>
25
-
<p>✅<b>Обработка асинхронных данных</b>- с помощью middleware (Redux Thunk, Redux Saga) можно легко управлять асинхронными операциями, например загрузкой данных с сервера, обработкой ошибок и кешированием.</p>
26
-
<p>✅<b>Удобное масштабирование</b>- чёткая структура данных и модульный подход позволяют легко расширять функциональность приложения без нарушения существующего кода.</p>
27
-
<p>✅<b>Уменьшение количества пропсов</b>- компоненты получают данные напрямую из хранилища, что снижает сложность передачи состояния через пропсы и повышает читаемость кода.</p>
28
-
<p>✅<b>Повышенная производительность</b>- благодаря использованию селекторов и мемоизации можно оптимизировать работу приложения и избежать лишних ререндеров компонентов.</p>
29
-
<p>✅<b>Совместимость с серверным рендерингом (SSR)</b>- Redux позволяет передавать начальное состояние с сервера, что делает возможным рендеринг на стороне сервера в приложениях на Next.js или в других фреймворках.</p>
30
-
<h2>Как установить Redux и начать работать</h2>
31
-
<p>1. Чтобы установить Redux и React-Redux, выполним в терминале команду:</p>
32
-
<p>npm install redux react-redux</p>
33
-
<p>2. Создадим хранилище в файле store.js:</p>
34
-
<p>import { createStore } from 'redux';const store = createStore(myReducer);</p>
35
-
<p>Редуктор myReducer мы создадим далее.Также важно отметить, что как альтернативный вариант можно использовать configureStore из библиотеки Redux Toolkit, но описанный выше метод также будет работать.3. Сделаем провайдер для передачи хранилища в React-приложение. Для этого обернём корневой компонент приложения в компонент Provider из react-redux:</p>
36
-
<p>import { Provider } from 'react-redux';import store from './store';import App from './App';ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root'));</p>
37
-
<h2>Пример применения библиотеки</h2>
38
-
<p>Разберём на примере, как при помощи Redux создать ту-ду-лист.1. Создаём actions, не забывая про обязательное поле type:</p>
39
-
<p>const addTask = (task) => ({ type: 'ADD_TASK', payload: task });const removeTask = (id) => ({ type: 'REMOVE_TASK', payload: id });</p>
40
-
<p>2. Далее создаём reducer:</p>
41
-
<p>const initialState = { tasks: [] };function tasksReducer(state = initialState, action) { switch (action.type) { case 'ADD_TASK': return { tasks: [...state.tasks, { id: Date.now(), text: action.payload }] }; case 'REMOVE_TASK': return { tasks: state.tasks.filter(task => task.id !== action.payload) }; default: return state; }};</p>
42
-
<p>Редуктор по умолчанию должен возвращать новое состояние. Поэтому если мы не распознали тип действия, то возвращаем старое значение.3. Подключаем к React компонент, используя хуки useSelector и useDispatch из react-redux. В итоге любой наш компонент сможет отправлять действия через useDispatch и получать данные из store с помощью useSelector .</p>
43
-
<p>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 (</p>
44
-
<p><input type="text" value={task} onChange={(e) => setTask(e.target.value)} /> <button onClick={() => dispatch(addTask(task))}>Добавить задачу</button><ul>{tasks.map(t => (<li>{t.text} <button onClick={() => dispatch(removeTask(t.id))}>Удалить</button></li>
45
-
))}</ul></p>
46
-
<p>);};</p>
47
-
<p>Совет эксперта</p>
48
-
<p><b>Руслан Посевкин, software engineer</b>Если ваш проект не требует глобального управления состоянием, рекомендую использовать локальное состояние (useState в React). Однако в сложных приложениях Redux значительно облегчает управление данными, главное - правильно организовать логику работы с хранилищем.Также важно правильно организовать структуру файлов в проекте. Разделяйте логику Redux по модулям, чтобы не перегружать один файл. Например, создавайте отдельные файлы для actions, reducers и selectors.Освоение Redux потребует времени, но оно того стоит. Успехов в изучении!</p>
49
-
<p>Яндекс Практикум Software Engineer</p>
50
-
<p>Яндекс Практикум Редактор</p>
51
-
<p>Яндекс Практикум Иллюстратор</p>
52
-
<h2>Подпишитесь на наш ежемесячный дайджест статей - а мы подарим вам полезную книгу про обучение!</h2>
53
-
<p>Инкремент и декремент в Java</p>
54
-
<p>Методы массивов Javascript: что это такое и как с ними работать</p>
55
-
<p>Дарим 1500 баллов Плюса за покупку курса и новогоднее обещание себе - до 15 января.</p>
56
-
</p>