Easy Peasy предоставляет лучший API и опыт поверх Redux
С конца 2019 года я использую Easy Peasy для управления состоянием своих приложений как профессионально, так и лично. Библиотека имеет знакомый API и логику с легкостью и хорошей гибкостью. Если вы используете или уже использовали Redux, но не получили от него полной отдачи, обратите внимание на Easy-Peasy. Возможно, оно того стоит.
Easy Peasy - это абстракция Redux, предоставляющая обновленный API, ориентированный на опыт разработчиков. - Официальный сайт Easy Peasy
Каждый раз, открывая магазин Easy Peasy, я все больше экспериментировал с его реализацией. Я задавал себе больше вопросов не только о том, что может делать библиотека, но и о том, что с ней можно сделать. Во время своего последнего проекта я спрашивал себя: «Что, если бы я хотел, чтобы мое приложение имело доступ только к определенному подмножеству действий? Может ли Easy Peasy создавать частные и публичные акции для своих магазинов? »
Я просмотрел документы, но не нашел ответа на этот вопрос. Я надеялся на что-то вроде классов JavaScript, в которых я мог бы предварять любое действие или значение состояния с помощью private
. Но хотя это было не так, это не значит, что это был не ответ.
Я упомянул, что с каждым проектом я исследовал больше не только того, что может сделать Easy Peasy, но и того, что я могу с ним сделать - и это будет примером последнего.
Примечание. В этой статье предполагается базовое понимание создания магазина и хуков с помощью Easy Peasy. Некоторые примеры кода включают в себя эти концепции, но не объясняют и не показывают их полностью. Посетите Документы Easy Peasy, чтобы получить более подробную информацию о том, как начать работу.
Проэкт
Недавно я работал над созданием централизованного магазина, который будет обслуживать как веб-приложение React, так и приложение React Native. Хранилище будет содержать все значения состояния, запросы данных, логику преобразователя и типы TypeScript. Таким образом, оба продукта единообразно извлекают данные из одного и того же места, одинаково, с одинаковой логикой, и все с единой точкой для обновления и обслуживания. Магазин устанавливается, как и любой другой пакет npm, и предоставляет поставщика обоим приложениям и обеим командам.
И тут в голову пришла идея публичных и частных акций.
Этот магазин будет использоваться для разных продуктов и команд. Сейчас легко работать с другими разработчиками, но по мере роста команд в конечном итоге этого может не быть. Шаблоны и логика, обсуждаемые сейчас в команде, не всегда могут быть четко переданы позже, лично или с помощью документации, и тогда эти шаблоны могут сломаться.
Способ смягчить это сейчас, а затем и в более широком масштабе, - раскрыть только те действия, которые приложения должны использовать.
Разоблачение публичных действий
Как уже упоминалось, в документации для Easy Peasy я не видел способа поддержки этой функциональности из коробки, поэтому мне пришлось проявить немного творчества, чтобы ее реализовать.
Давайте посмотрим на пример модели, которую мы будем использовать повсюду:
В (сокращенном) коде выше у нас есть магазин для Projects
. Он содержит все свое состояние, действия и переходы. Используя Easy Peasy, мы можем создавать хуки для доступа к этому магазину в нашем пользовательском интерфейсе:
Как видно из приведенного выше кода, хуки useStoreState
и useStoreActions
открывают доступ ко всему хранилищу Project
. Однако мы хотим ограничить это.
В частности, здесь используется шаблон для thunks
поддержания состояний error
и loading
вручную. Он также получит свой ответ и вызовет actions.setProjects()
самостоятельно. Из-за этого шаблона мы не хотим, чтобы пользовательский интерфейс имел доступ к setError
, setLoading
или setProjects
, поскольку все эти действия обрабатываются внутри магазина. Мы хотим, чтобы пользовательский интерфейс имел доступ только к setActiveProjectSlug
и fetchProjects
.
Создание собственных хуков
Мы определили, какие действия должны быть закрытыми , а какие должны быть доступны пользовательскому интерфейсу.
- Частный:
setError
,setLoading
,setProjects
- Общедоступные:
setActiveProjectSlug
,fetchProjects
Зная это, давайте создадим наши собственные хуки в централизованном хранилище, чтобы отфильтровать все, что считается частным:
Здесь мы создали специальный крючок (useProjectActions
), который вызывает базовый крючок (useStoreActions
). Поскольку базовый Hook возвращает все из хранилища, мы деструктурируем только те действия, которые нам нужны (fetchProjects
и setActiveProjectSlug
), и возвращаем их, оставляя все остальное, что мы считаем частным.
Примечание. То же самое можно сделать и с общедоступными, и с частными государственными ценностями.
Машинопись
Еще одна причина, по которой мне нравится Easy Peasy, - это его интеграция с TypeScript. Поскольку текущий проект выполняется на TypeScript, давайте посмотрим, как вводить наши новые пользовательские хуки.
При создании магазина в TypeScript действия и преобразователи используют типы Action
и Thunk
, экспортированные из Easy Peasy. Но при использовании этих действий через useStoreActions
Hook они теперь набираются как ActionCreator
и ThunkCreator
.
Теперь наш новый пользовательский useProjectActions
набран и предоставляет только те действия, которые мы хотим, чтобы пользовательский интерфейс использовал.
Заключение
Магазины могут быстро стать большими, с множеством моделей, каждая из которых содержит свои собственные действия, преобразователи и состояние. Когда такой магазин используется в нескольких приложениях с разными командами и разработчиками, его использование в пользовательском интерфейсе может сбивать с толку, когда все эти данные доступны. Без четкой связи и документации (и даже без нее) это вопрос времени, пока не будет вызвано или использовано что-то, чего не должно быть, пользовательский интерфейс даст сбой и шаблоны магазина сломаются.
Сделав дополнительный шаг по созданию пользовательских хуков для фильтрации всего, что считается частным, можно устранить эту путаницу в пользовательском интерфейсе и сохранить шаблоны в магазине.
Есть разница между тем, что может делать библиотека, и тем, что можно делать с ее помощью. Easy Peasy - потрясающая библиотека, которая хорошо выполняет многие задачи, но то, что можно сделать с ее помощью с помощью, еще больше расширяет эту функциональность.