Завершил курс «JS: Redux (React)» https://ru.hexlet.io/courses/js-redux решил написать небольшой отзыв. Если кратко освоение Redux – это подвиг.
Redux https://redux.js.org/introduction/getting-started – это хранилище данных для ReactJS. Меняем данные в хранилище автоматически изменяется внешний вид приложения. Магия! :-) Упрощенно можно считать, что это маленькая хитрая база данных в памяти, в которой хранятся все данные необходимые приложению.
Redux – это не просто хранилище, это архитектура. Состоящая из 4 частей.
- Компоненты пользовательского интерфейса (UI Components). Они ответственны за вывод информации на экран на основе данных, переданных им из хранилища. Они обращаются к создателям действий.
- Создатели действий (Action Creators) ответственны за создание и диспетчеризацию действий.
- Редьюсеры (Reducers) получают диспетчеризованные действия и обновляют состояние хранилища.
- Хранилище (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 дополнительных. Ежедневно, шаг за шагом. Вдохновение для дилетантов, остальные просто работают.
Оригинальная публикация.
