Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-26

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

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

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

4 <ol><li>Компоненты пользовательского интерфейса (UI Components). Они ответственны за вывод информации на экран на основе данных, переданных им из хранилища. Они обращаются к создателям действий.</li>

5 <li>Создатели действий (Action Creators) ответственны за создание и диспетчеризацию действий.</li>

6 <li>Редьюсеры (Reducers) получают диспетчеризованные действия и обновляют состояние хранилища.</li>

7 <li>Хранилище (Data Store) ответственно за хранение данных приложения.</li>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

22 <a>Оригинальная публикация</a>.