Жизнь вынуждает ко многим добровольным действиям или как я осваивал Redux
2026-02-26 18:30 Diff
https://ru.hexlet.io/blog/posts/zhizn-vynuzhdaet-ko-mnogim-dobrovolnym-deystviyam-ili-kak-ya-osvaival-redux

Завершил курс «JS: Redux (React)» https://ru.hexlet.io/courses/js-redux решил написать небольшой отзыв. Если кратко освоение Redux – это подвиг.

Redux https://redux.js.org/introduction/getting-started – это хранилище данных для ReactJS. Меняем данные в хранилище автоматически изменяется внешний вид приложения. Магия! :-) Упрощенно можно считать, что это маленькая хитрая база данных в памяти, в которой хранятся все данные необходимые приложению.

Redux – это не просто хранилище, это архитектура. Состоящая из 4 частей.

  1. Компоненты пользовательского интерфейса (UI Components). Они ответственны за вывод информации на экран на основе данных, переданных им из хранилища. Они обращаются к создателям действий.
  2. Создатели действий (Action Creators) ответственны за создание и диспетчеризацию действий.
  3. Редьюсеры (Reducers) получают диспетчеризованные действия и обновляют состояние хранилища.
  4. Хранилище (Data Store) ответственно за хранение данных приложения.

Не поняли? Это нормально. Дальше будет интересней.

Весь курс делали приложение Todo List. Список задач, галочки, кнопочки добавить\удалить. Задача типовая. Теперь я счастливый обладатель 9 версий туду-листов.

Первая мысль моя была поместить в хранилище массив с задачами, и задачи будут доступны во всём приложений. Логично? Но автор курса показал, что я не прав. Более грамотно – это создать массив объектов, далее второй массив со ссылками на индентификаторы объектов первого массива и третий массив, который отвечает з�� отображение элементов первого массива на экране. Сначала я подумал, что курил автор, но это называется нормализация данных и позволяет избежать дублирования информации, а также отделить данные от их представления. А при выводе на экране, это всё комбинируется в один объект. Это напоминает как из 2-х газов: кислорода и водорода появляется вода.

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

Но это только начало, как правильно хранить данные в Redux курс не ограничивается. Redux – это не одна библиотека – это экосистема.

Представьте Excel, дана таблица: имя товара, количество, цена. Нужно посчитать общую сумму. И мы можем добавлять\удалить строки итоговая сумма тоже автоматом будет пересчитываться. В Redux это тоже можно и это называется селекторы, библиотека Reselect https://github.com/reduxjs/reselect. Вот и создаём функции, которых вызывают другие функции, результаты которых используют третьи функции. Я уже подумал о самопроизвольном размножении функций путём почкования. Но функциональный подход, он такой функциональный… Вообщем, Excel в отдельно взятом приложении эмулировать можно :-)

Думаете нажали на кнопку и вот он результат, а не всегда. Приложению надо «сходить» на сервер, пообщаться, получить задачи и только тогда что-то отобразить (или не отобразить). Это называвается асинхронные действия, и реализуется при помощи библиотеки redux-thunk https://github.com/reduxjs/redux-thunk. Вот ловим состояния и пока приложение общается с сервером показывает колёсико, что что-то работает.

Думаете где лучше хранить данные формы? Правильно, всё в хранилище. Библиотека Redux Forms https://redux-form.com/8.2.2/docs/gettingstarted.md/.

Работа с формами на чистом реакте какой-то кошмар с уймой однотипных действия, добавление лишней галочки образует много однообразной работы. По ощущением напоминает работу вычерпать мировой океан чайной ложкой. Redux Forms решает эту проблему, но и поднимает новые. Перед отправкой данные формы надо проверить, вывести ошибки, не так всё просто как кажется на первый взгляд. Документация достаточно объёмная.

Самое интересно, я не первый кто столкнулся с этими проблемами и есть решение Redux Toolkit https://redux-toolkit.js.org/ Люди собрали Redux и популярные библиотеке в одном пакете, но чтобы его использовать надо знать, как это работает «под капотом».

В результате курс получился достаточно насыщенный разными подходами и концепциями. Последний раз такой информационный перегруз у меня был был когда я изучал HTML + CSS. Сразу освоить уйму тегов, селекторов их взаимодействия достаточно трудоёмко. Но большого слона, надо есть по кусочкам.

Если начинаете новый проект забудьте про Redux с его функциональной архитектурой, используйте MobX https://mobx.js.org/README.html получите всё тоже самое, но осваивается за пару вечеров. Но обычно жизнь штука сложная и есть большая вероятность, что на новой работе будет кровавый энтерпрайз, который пишет уже 5 лет, с исходным кодами на мегабайты и Redux в качестве хранилища. Хочется, модное, клёвое, молодежное, но мир — это не фабрика по исполнению желаний и жизнь вынуждает ко многим добровольным действиям, как Redux.

На самом деле это только первый шаг. Экосистема ReactJS достаточно обширная, за пределами 2-х курсов: ReactJs + Redux остался контекст, хуки, React Router, Typescript, а ведь ещё приложение надо упаковать в Docker и разместить на сервере. Но я жду автора, тему про хуки он обещал написать.

Но я продолжаю изучать Javascript, на Hexlet я запланировал изучить 10 основных курсов в рамках профессии и 9 дополнительных. Ежедневно, шаг за шагом. Вдохновение для дилетантов, остальные просто работают.

Оригинальная публикация.