Как работать с Redux
- 19 февраля 2022
Всё, что находится в оперативной памяти компьютера и относится к работе программы, можно назвать состоянием приложения. Приложения могут быть составлены из блоков, модулей и компонентов. У каждого блока может быть своё собственное состояние. У выпадающего списка собственным можно считать состояние признака видимости опций. Это следствие того, что пока значение выпадающего списка не поменялось, поведение остальных частей приложения не изменится.
Глобальное состояние приложения — это часть состояния приложения, которое используется, учитывается и изменяется в разных частях, модулях, компонентах этого приложения.
Будем считать, что остальные части приложения меняют свое поведение в зависимости от того, какой пункт списка выбран. Это и есть пример глобального состояния.
Глобальное состояние должно быть доступно из любой части приложения, а при его изменении компоненты приложения должны произвести необходимые вычисления. Следовательно, нам необходимо правильно управлять глобальным состоянием.
Из чего состоит Flux-архитектура
Оглядимся вокруг и посмотрим на объекты материального мира. Взять хотя бы котика. Он разбудит хозяина, когда голодный. Он наступит на клавиатуру, если хочет, чтобы с ним поиграли. Он гуляет сам по себе.
Действия котика и его состояние составляют сущность его существа. Мы можем смоделировать такое поведение и в наших программах с помощью компонентов. Каждый компонент содержит необходимые данные и определяет методы их изменения. Такой компонентный подход может быть реализован в архитектуре MVC.
Когда объектов становится много, наступает хаос. В программе так тоже бывает. Когда компонентов в архитектуре MVC много, и каждый из них что-то сообщает остальным, а все в ответ на это что-то изменяют в своих состояниях и снова сообщают об этом другим компонентам — наступает хаос. А всё потому что у каждого компонента хранится часть состояния, которая важна не только ему, но и другим компонентам.
Во Flux-архитектуре такое глобальное состояние предложено вынести в хранилища, отделить его от компонентов. А изменение состояния производить через специальные ворота, называемые диспетчерами. В этом случае поток управления меняет направление: изменение состояния переходит от представлений к диспетчеру, а новое состояние предоставляется всем представлениям сразу.

Во Flux-архитектуре состояние является общим для многих представлений.
Вот небольшая иллюстрация этой идеи. В хранилище можно сохранить список сообщений с признаками — название чата и флаг «прочтено».
- Одно представление может выбирать из этого списка и агрегировать только названия чатов — это будет компонент Chats.
- Второе представление может выбирать и подсчитывать из этого списка количество непрочитанных сообщений для каждого чата и изображать бейджик.
- Третье представление может фильтровать сообщения одного из чатов и показывать их, и это будет Messages компонент.
При этом, если пользователь отметит, что сообщения в конкретном чате «прочитаны», соседние представления обновятся не потому что их уведомил компонент Messages, а потому что изменилось глобальное состояние приложения.
Что такое Redux?
Flux-архитектура — это идея. Идею можно реализовать разными способами, и один из них — Redux.
Redux — это реализация Flux на JavaScript. Эту реализацию удобно применять в веб-приложениях для управления общим глобальным состоянием. У неё есть специальная привязка для использования с React, о которой мы поговорим позднее.
Redux удобно использовать, когда
- Требуется синхронизировать состояние между многими компонентами;
- Постоянно приходится контролировать изменение состояния во времени — time travel debug;
- Приходится перехватывать и вмешиваться в процесс изменения состояния используя middleware.
Использовать Redux можно и в vanila javascript приложениях. Для этого надо подключить библиотеку, например, из CDN.
Познакомимся поближе с составными частями Redux.
Анатомия Redux — action, store, reducer, dispatch.
В этом разделе соберём небольшое приложение, чтобы посмотреть на то, как части Redux взаимодействуют между собой. Предположим, нашему приложению требуется следить за нажатиями мыши на экране и вести журнал.
Action
Как и в оригинальной идее Flux, у Redux есть понятие действия — Action
. Action
это обычный объект JavaScript. Этот объект попадается на глаза разработчику дважды. В первый раз, когда JavaScript реагирует на событие, а во второй раз, когда сведения из объекта встраиваются в хранилище.
В нашем приложении объект, описывающий действие, будет содержать дату, время и координаты мыши. Этот объект можно создать с помощью функции-фабрики.
const MOUSE_CLICK = "MOUSE_CLICK";
function createMouseClickAction(evt) {
return {
type: MOUSE_CLICK,
payload: {
time: new Date().toISOString(),
clientX: evt.clientX,
clientY: evt.clientY,
}
}
}
reducer
Написанная нами функция createMouseClickAction
возвращает объект с двумя полями — type
и payload
. Мы можем использовать полученный объект, чтобы обновить наш список. Реализуем это обновление в специальной функции. Допустим, что в параметрах она будет получать текущий список и наш объект и добавлять payload в конец списка.
function reducer(state=[], action){
if(action.type === MOUSE_CLICK){
const newState = [...state];
newState.push(action.payload);
return newState;
}
return state;
}
Мы назвали функцию обновления состояния reducer
, но это просто дань традиции. Всё же функция имеет определенные особенности. Она
- Не обновляет полученный массив, а копирует его;
- Проверяет тип аргумента
action;
- Возвращает исходное состояние, если
action
не понятен.
store
В составе библиотеки redux.js
есть функция создания хранилища createStore
. Используем её для создания хранилища и подключим к нему несколько представлений, которые создадим такой функцией.
function createView(element){
store.subscribe(()=>{
element.innerHTML = '';
const state = store.getState();
state.forEach((e)=>{
const li = document.createElement('li');
li.innerText = `time: ${e.time}, x: ${e.clientX}, y: ${e.clientY}`;
element.appendChild(li);
});
});
}
dispatch
Закончим приложение определением обработчика click
. В нём мы будем использовать ещё одну составляющую часть Redux — dispatch
— именно этот метод позволяет отправить действие диспетчеру и изменить состояние приложения.
document.addEventListener('click',(evt) => {
store.dispatch(createMouseClickAction(evt));
})
На этом приложение закончено. Работающий пример и полный код примера можно найти на JSFiddle.
Всё то же самое, но в связке с React
Redux создавали для использования вместе с React, а сама связка помещена создателями в пакет react-redux. В нём содержатся сервисные функции для удобства использования store.subscribe
, store.dispatch
. Доступны два стиля их использования:
- Функция
connect
создает обертку вокруг вашего компонента и подключает его к хранилищу. - Хуки
useDispatch, useSelector
делают ту же работу, но для функциональных компонентов.
Реализуем в React ту же функциональность, что и в предыдущем разделе. Дополнительно нам потребуется библиотека react-redux
.
Функции createMouseClickAction
и reducer
остаются без изменений.
Вместо createView
мы создадим компонент View:
const itemToString = (item)=>`time:${item.time}, x: ${item.clientX}, y: ${item.clientY}`;
const View=()=>{
const state = ReactRedux.useSelector((state)=>state);
return (<ul>
{state.map((item)=>(<li key={item.time}>{itemToString(item)}</li>))}
</ul>)
}
В этом коде сравните строки
const state = ReactRedux.useSelector((state)=>state);
const state = store.getState();
из предыдущего примера.
Вместо прямого подключения обработчика событий используем useEffect
для своевременного снятия обработчика.
const App = ()=>{
const dispatch = ReactRedux.useDispatch();
React.useEffect(()=>{
const handleClick = (evt)=>{
dispatch(createMouseClickAction(evt));
}
document.addEventListener('click', handleClick);
return ()=>{
document.removeEventListener('click', handleClick);
};
});
return (<div className="container">
<View/>
<View/>
</div>);
}
Обратите внимание на способ получения функции dispatch
.
Функции useSelector
и useDispatch
могут выполнять свою роль, только если мы правильно присоединим React-приложение к хранилищу store
нашего Redux.
Вы помните, что в предыдущем приложении мы создавали хранилище так:
const store = Redux.createStore(reducer)
.
В этот раз ничего не поменялось. А вот созданное хранилище мы подключим к приложению React с помощью ReactRedux.Provider
.
ReactDOM.render(
(<ReactRedux.Provider store={store}>
<App />
</ReactRedux.Provider>),
document.querySelector("#root")
)
На этом всё — мы сделали такое же приложение, только на React. Собранное работающее приложение можно найти на JSFiddle.
В качестве самостоятельной работы попробуйте модифицировать пример так, чтобы в левой части страницы перечислялись записи от нажатии мыши в левой части экрана, а в правом view — правые клики.
Альтернативы Redux
Redux — далеко не единственная возможность управления глобальным состоянием.
В банковском приложении один из атрибутов глобального состояния — баланс клиентского счета. Очевидно, что источник этого значения не может находиться на стороне браузера, потому что правильное значение баланса — ответственность банковского сервера.
Правильно ли использовать в таком случае использовать Redux для хранения остатков по счетам? Похоже, что нет.
Redux — не лучшее решение для ситуации, когда глобальное состояние — более глобальное, чем окно браузера.
Поэтому следует знать о альтернативных возможностях управления состоянием
Mobx
— скрывает функциональное программирование для управления состояниемSWR
— реализует стратегию кеширования по HTTP RFC 5861GraphQL
— язык и его реализация для запросов данных с сервера- И некоторые другие варианты.
Выбирайте с умом и используйте тот способ, который лучше подходит для ваших задач.
⭐ Научитесь собирать интерфейсы с нуля в экосистеме React и создавать интерактивные React-компоненты на профессиональном онлайн-курсе.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Генерация QR-кодов на JS в 4 шага. Node.js + qrcode
Сегодня сделаем простой REST API на Node.js и Express, который будет генерировать QR-коды для любой ссылки. Если у вас ещё не установлены Node.js
и npm
, установите их с официального сайта.
- 22 ноября 2023

ChatGPT не справляется
Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.
- 2 ноября 2023

Знакомство с JavaScript
Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.
Вы можете добавить JavaScript в ваш HTML-документ двумя способами:
Встроенный JavaScript: непосредственно в HTML-документ, в тегах <script>
:
<script>
alert("Привет, мир!");
</script>
Внешний JavaScript: подключение внешнего .js
файла к HTML-документу:
<script src="script.js"></script>
- 1 ноября 2023

Событие onclick в JS на примерах
Интерактивность — ключевой компонент любого современного сайта. И одним из наиболее часто используемых событий для создания интерактивности является событие onclick
. В этой статье мы подробно разберёмся, что такое событие onclick
, как его использовать и приведем примеры применения.
Событие onclick
— это событие JavaScript, которое активируется, когда пользователь кликает на определенный элемент страницы. Это может быть кнопка, ссылка, изображение или любой другой элемент, на который можно нажать.
- 30 октября 2023

Как перевернуть сайт. Самая короткая инструкция
Не представляем, зачем это может понадобиться, но не могли пройти мимо.
Никакой магии. Мы вызываем JavaScript-функцию rotateBody()
, которая применяет свойство transform
с значением rotate(180deg)
к элементу <body>
. Когда вы нажмете на кнопку «Перевернуть», всё, что находится внутри <body>
будет повернуто на 180 градусов (то есть, встанет вниз головой)
function rotateBody() {
document.body.style.transform = 'rotate(180deg)';
}
<button onclick="rotateBody()">Перевернуть</button>
Но такой код повернёт страницу только один раз. Если нужно, чтобы она возвращалась обратно при втором клике, усложним код:
let isRotated = false;
function rotateBody() {
if (isRotated) {
document.body.style.transform = 'rotate(0deg)';
document.body.style.direction = "ltr";
} else {
document.body.style.transform = 'rotate(180deg)';
document.body.style.direction = "rtl";
}
isRotated = !isRotated;
}
Надеемся, вы прочитали это описание до того, как нажать на кнопку.
- 25 октября 2023

Как узнать геолокацию: Geolocation API
Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.
Основной метод Geolocation API — getCurrentPosition()
, но есть и другие методы и свойства, которые могут пригодиться.
- 16 октября 2023

Что такое localStorage и как им пользоваться
localStorage
— это место в браузере пользователя, в котором сайты могут сохранять разные данные. Это как ящик для хранения вещей, которые не исчезнут, даже если вы выключите компьютер или закроете браузер.
До localStorage
разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.
- 12 октября 2023

Случайное число из диапазона
Допустим, вам зачем-то нужно целое случайное число от min
до max
. Вот сниппет, который поможет:
function getRandomInRange(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
- Math.random () генерирует случайное число между 0 и 1. Например, нам выпало число
0.54
. - (max — min + 1): определяет количество возможных значений в заданном диапазоне.
10 - 0 + 1 = 11
. Это значит, что у нас есть 11 возможных значений (0, 1, 2, ... 10). - Math.random () * (max — min + 1): умножает случайное число на количество возможных значений:
0.54 * 11 = 5.94
. - Math.floor (): округляет число вниз до ближайшего целого. Так,
Math.floor(5.94) = 5
. - ... + min: смещает диапазон так, чтобы минимальное значение соответствовало
min
. Но в нашем примере, так какmin = 0
, это не изменит результат. Пример:5 + 0 = 5
. - Итак, в нашем примере получилось случайное число 5 из диапазона от 0 до 10.
Чтобы протестировать, запустите:
console.log(getRandomInRange(1, 10)); // Тест
- 7 сентября 2023

В чём разница между var и let
Если вы недавно пишете на JavaScript, то наверняка задавались вопросом, чем отличаются var
и let
, и что выбрать в каждом случае. Объясняем.
var
и let
— это просто два способа объявить переменную. Вот так:
var x = 10;
let y = 20;
Переменная, объявленная через var
, доступна только внутри «своей» функции, или глобально, если она была объявлена вне функции.
function myFunction() {
var z = 30;
console.log(z); // 30
}
myFunction();
console.log(z); // ReferenceError
Это может создавать неожиданные ситуации. Допустим, вы создаёте цикл в функции и хотите, чтобы переменная i
осталась в этой функции. Если вы используете var
, эта переменная «утечёт» за пределы цикла и будет доступна во всей функции.
Переменные, объявленные с помощью let
доступны только в пределах блока кода, в котором они были объявлены.
if (true) {
let a = 40;
console.log(a); // 40
}
console.log(a); // ReferenceError
В JavaScript блок кода — это участок кода, заключённый в фигурные скобки {}
. Это может быть цикл, код в условном операторе или что-нибудь ещё.
if (true) {
let blockScoped = "Я виден только здесь";
console.log(blockScoped); // "Я виден только здесь"
}
// здесь переменная blockScoped недоступна
console.log(blockScoped); // ReferenceError
Если переменная j
объявлена в цикле с let
, она останется только в этом цикле, и попытка обратиться к ней за его пределами вызовет ошибку.
- 30 августа 2023

Быстрый гайд по if, else, else if в JavaScript
Допустим, вы собираетесь идти на прогулку. Если на улице солнечно, вы возьмёте с собой солнечные очки.
Это можно описать с помощью оператора if
.
let weather = "sunny";
if (weather === "sunny") {
console.log("Возьму солнечные очки");
}
А если погода не солнечная, а, скажем, дождливая, вы возьмете зонт.
Этот сценарий можно описать с помощью if-else
.
let weather = "rainy";
if (weather === "sunny") {
console.log("Возьму солнечные очки");
} else {
console.log("Возьму зонт");
}
Условный оператор if-else if-else
Теперь представим, что у вас есть несколько вариантов транспорта для дороги на работу: машина, велосипед, общественный транспорт. Выбор будет зависеть от различных условий, например, погоды и времени суток. Логично, что в дождь безопаснее ехать на автобусе, а в хорошую погоду можно прокатиться на машине или велосипеде, если утро и пробки. То есть схема такая:
И всё это очень легко описывается кодом:
let weather = "sunny";
let time = "morning";
if (weather === "rainy") { // если дождь, то только так
console.log("Еду на автобусе");
} else if (time === "morning") { // если не дождь и утро
console.log("Еду на велике мимо пробок");
} else { // если второе не дождь и не утро
console.log("Еду на машине");
}
Ветвление только может показаться сложным, но вообще оно очень логичное, если понять, какие действия после каких условий выполняются. Разберитесь один раз и поймёте на всю жизнь, 100%.
🐈
- 30 августа 2023