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 - потрясающая библиотека, которая хорошо выполняет многие задачи, но то, что можно сделать с ее помощью с помощью, еще больше расширяет эту функциональность.