1 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Redux - это база данных в программе. В этой базе хранится<strong>состояние</strong>- то есть данные приложения. Эта база отвечает только за данные, поэтому она никак не связана с браузером, DOM и фронтендом в целом. Теоретически Redux можно использовать даже на бэкенде в Node.js.</p>
1
<p>Redux - это база данных в программе. В этой базе хранится<strong>состояние</strong>- то есть данные приложения. Эта база отвечает только за данные, поэтому она никак не связана с браузером, DOM и фронтендом в целом. Теоретически Redux можно использовать даже на бэкенде в Node.js.</p>
2
<p>С точки зрения кода, Redux - это объект с данными внутри. Остальные части приложения используют этот объект, чтобы хранить, изменять и извлекать данные. В терминологии Redux этот объект называется<strong>хранилищем</strong>(<em>store</em>).</p>
2
<p>С точки зрения кода, Redux - это объект с данными внутри. Остальные части приложения используют этот объект, чтобы хранить, изменять и извлекать данные. В терминологии Redux этот объект называется<strong>хранилищем</strong>(<em>store</em>).</p>
3
<p>В простейшем случае подошел бы и обычный объект JavaScript:</p>
3
<p>В простейшем случае подошел бы и обычный объект JavaScript:</p>
4
<p>Но с этим подходом есть одна проблема - он не позволяет отслеживать изменение данных. Если какая-то часть приложения изменила наши данные, то мы об этом не узнаем и не сможем отреагировать - например, перерисовать нужную часть экрана.</p>
4
<p>Но с этим подходом есть одна проблема - он не позволяет отслеживать изменение данных. Если какая-то часть приложения изменила наши данные, то мы об этом не узнаем и не сможем отреагировать - например, перерисовать нужную часть экрана.</p>
5
<p>Redux решает эту проблему. Изменение данных внутри хранилища порождает события, на которые можно подписываться и выполнять произвольную логику - например, перерисовку экрана. В этом случае данные внутри Redux изменяются через указание<strong>действий</strong>(<em>actions</em>), а не напрямую, как при работе с обычными объектами.</p>
5
<p>Redux решает эту проблему. Изменение данных внутри хранилища порождает события, на которые можно подписываться и выполнять произвольную логику - например, перерисовку экрана. В этом случае данные внутри Redux изменяются через указание<strong>действий</strong>(<em>actions</em>), а не напрямую, как при работе с обычными объектами.</p>
6
<p>Рассмотрим полный пример использования Redux:</p>
6
<p>Рассмотрим полный пример использования Redux:</p>
7
<p>Единственный способ изменить состояние в хранилище - это передать или отправить действие в функцию dispatch().</p>
7
<p>Единственный способ изменить состояние в хранилище - это передать или отправить действие в функцию dispatch().</p>
8
<p><strong>Действие</strong>- это обычный JavaScript-объект, в котором есть как минимум одно свойство type. Никаких ограничений на содержимое этого свойства не накладывается, но в switch внутри редьюсера должен быть подходящий обработчик.</p>
8
<p><strong>Действие</strong>- это обычный JavaScript-объект, в котором есть как минимум одно свойство type. Никаких ограничений на содержимое этого свойства не накладывается, но в switch внутри редьюсера должен быть подходящий обработчик.</p>
9
<p>Само изменение состояния описано внутри редьюсера. Снаружи мы лишь говорим, какое изменение нужно выполнить. Этот подход отличается от того, что мы делали в React, где изменение состояния происходит напрямую:</p>
9
<p>Само изменение состояния описано внутри редьюсера. Снаружи мы лишь говорим, какое изменение нужно выполнить. Этот подход отличается от того, что мы делали в React, где изменение состояния происходит напрямую:</p>
10
<p>Схематически этот процесс можно показать так:</p>
10
<p>Схематически этот процесс можно показать так:</p>
11
<p>Изучим еще один пример с использованием массива и передачей данных через действие:</p>
11
<p>Изучим еще один пример с использованием массива и передачей данных через действие:</p>
12
<p>Ключ payload необязательный. Поэтому можно все данные складывать в объект под любыми свойствами, но мы не советуем так делать. Смешивать статически заданные и динамические ключи в одном объекте - это плохая идея.</p>
12
<p>Ключ payload необязательный. Поэтому можно все данные складывать в объект под любыми свойствами, но мы не советуем так делать. Смешивать статически заданные и динамические ключи в одном объекте - это плохая идея.</p>
13
<h2>Как устроен Redux</h2>
13
<h2>Как устроен Redux</h2>
14
<p>Чтобы написать самую простую версию Redux, нужно всего семь строчек:</p>
14
<p>Чтобы написать самую простую версию Redux, нужно всего семь строчек:</p>
15
<p>Перейдем к<strong>начальному состоянию</strong>. Выше мы упоминали, что оно задается в определении редьюсера:</p>
15
<p>Перейдем к<strong>начальному состоянию</strong>. Выше мы упоминали, что оно задается в определении редьюсера:</p>
16
<p>Но часто этого недостаточно. Данные могут прийти из бэкенда, перед началом работы их нужно прогрузить в хранилище. Для этого случая в Redux есть особый путь:</p>
16
<p>Но часто этого недостаточно. Данные могут прийти из бэкенда, перед началом работы их нужно прогрузить в хранилище. Для этого случая в Redux есть особый путь:</p>
17
<p>Redux посылает специальное действие с type равным '@@redux/INIT', которое нельзя перехватывать. Если редьюсер реализован правильно и содержит секцию default в switch, то хранилище заполнится данными из initState:</p>
17
<p>Redux посылает специальное действие с type равным '@@redux/INIT', которое нельзя перехватывать. Если редьюсер реализован правильно и содержит секцию default в switch, то хранилище заполнится данными из initState:</p>
18
<p>Здесь функция createStore() внутри вызовет редьюсер так:</p>
18
<p>Здесь функция createStore() внутри вызовет редьюсер так:</p>
19
<p>Затем выполнится ветка default, и число 100 станет состоянием хранилища.</p>
19
<p>Затем выполнится ветка default, и число 100 станет состоянием хранилища.</p>
20
<h2>Выводы</h2>
20
<h2>Выводы</h2>
21
<p>Подведем итог и обсудим три важных принципа. Работая с Redux, мы:</p>
21
<p>Подведем итог и обсудим три важных принципа. Работая с Redux, мы:</p>
22
-
<ul><li>Создаем одно хранилище на прил��жение, храним состояние в одном месте (<em>Single source of truth</em>)</li>
22
+
<ul><li>Создаем одно хранилище на приложение, храним состояние в одном месте (<em>Single source of truth</em>)</li>
23
<li>Меняем состояние, посылая действие внутрь хранилища (<em>State is read-only</em>)</li>
23
<li>Меняем состояние, посылая действие внутрь хранилища (<em>State is read-only</em>)</li>
24
<li>Используем только чистые функции внутри хранилища, благодаря этому мы можем "путешествовать во времени" (<em>Changes are made with pure functions</em>)</li>
24
<li>Используем только чистые функции внутри хранилища, благодаря этому мы можем "путешествовать во времени" (<em>Changes are made with pure functions</em>)</li>
25
</ul>
25
</ul>