🚀 Встречайте Akita: Новый паттерн управления состоянием для Angular приложений
Перевод «🚀 Introducing Akita: A New State Management Pattern for Angular Applications» Netanel Basal.
Каждый разработчик знает, что управление состоянием, дело нелегкое. Постоянное отслеживание того, что было обновлено, почему и когда, может стать кошмаром, особенно в крупных приложениях.
В мире Angular самым популярным решением является ngrx/store, который был вдохновлен известной моделью Redux. Лично я большой поклонник Redux и много работал с ngrx. Однако, как разработчик, так и консультант, я также сталкивался и с необходимостью другого решения.
👶 Рождение Akita
Здесь, в Datorama, мы экспериментировали с различными инструментами, включая mobx и ngrx, и решили, что они нам не подходят. Вот почему я решил создать другое решение для управления состоянием, которое лучше всего соответствует нашим потребностям. Это также может служить альтернативой для разработчиков, которые не привязаны к концепциям Redux или испытывают трудности с ними.
Akita уже давно используется Datorama, и мы решили, что теперь она созрела для публикации в open source. Почти весь наш код был переведен с mobx и ngrx на Akita. Команда довольна тем, что Akita совмещает в себе как простоту, так и эффективность, что привело не только к сокращению времени разработки, но и к улучшению производительности.
Стоит отметить, что Datorama — это компания со сложной логикой управления состояниями, множеством взаимосвязанных объектов, фильтров и т.д.
🤔 Что такое Akita?
Akita — это паттерн управления состоянием, построенный на основе RxJS, который берет идею нескольких хранилищ данных от Flux и иммутабельных обновлений от Redux вместе с концепцией потоковых данных для создания модели Observable Data Stores.
Akita поддерживает простоту. Это избавляет вас от необходимости создавать шаблонный код и предлагает мощные инструменты с умеренным порогом вхождения, подходящие как для опытных, так и для начинающих разработчиков.
Akita основана на объектно-ориентированных принципах дизайна вместо функционального программирования, поэтому разработчики с опытом ООП должны чувствовать себя как дома. Его укоренившаяся структура предоставляет вашей команде фиксированный шаблон, от которого нельзя отклониться.
👁 Высокоуровневые принципы
- Хранилище (store) представляет собой единый объект, который содержит состояние и является “единым источником истины (single source of truth)”.
2. Единственный способ изменить состояние — это вызовsetState() или один из апдейт методов на его основе.
3. Компонент НЕ должен получать данные из хранилища напрямую. Для этого используются запросы (query).
4. Асинхронная логика и вызовы апдейтов должны быть инкапсулированы в сервисы.
Начнем с изучения основных концепций Akita. Хотя Akita поддерживает как обычное хранилище, так и хранилище сущностей, мы сосредоточимся на втором, потому что это именно то, что вам понадобится в ваших приложениях.
🤓 Основные концепции
Модель
Модель является формой представления объекта. Давайте возьмем, например, todo:
Akita рекомендует создавать как тип, так и фабричную функцию, отвечающую за создание объекта.
Хранилище сущностей
Как уже было сказано, хранилище представляет собой единый объект, который содержит состояние и является “единым источником истины (single source of truth)”.
Вы можете представить хранилище объектов как таблицу в базе данных, где каждая таблица представляет собой обыкновенную совокупность сущностей.
EntityStore Акиты упрощает процесс, предоставляя вам все необходимое для управления.
Давайте посмотрим, как мы можем использовать его для создания таблицы todos, т.е. организуем EntityStoreдля управления объектом Todo:
Во-первых, нам нужно определить интерфейс хранилища. В нашем случае мы можем расширить EntityState Акиты, добавляя тип Todo.
Кстати, EntityState выглядит следующим образом:
Используя эту модель, вы получите от Akita множество встроенных функций, таких как crud операции на сущностях, управление ошибками и т.д.
Например, вот как мы можем добавить новый todo пункт:
Или так, например, мы можем обновить todo:
Полный список API можно найти в документации.
Сущность Query
Query — это класс, отвечающий за запросы в хранилище.
Вы можете считать query похожим на запросы к базе данных. Его конструктор получает в качестве параметров свое собственное хранилище и, возможно, другие классы запросов.
Запросы могут обращаться к другим запросам, объединять объекты из разных хранилищ и т.д.
Давайте посмотрим, как мы можем использовать это для создания запроса todos:
Здесь вы также получите от Akita множество встроенных функций, включая такие методы, как selectAll(), selectEntity(), selectMany(), и т.д.
Например, так мы можем оперативно запросить список todos:
Или пример того, как мы можем запросить завершенный статус первого todo:
И снова список API можно найти в документации.
Здесь представлено рабочее todos приложение:
В следующем посте будет показан пример реализации корзины покупок с помощью Akita, который продемонстрирует реальную функциональность Akita.
Перевод «🚀 Introducing Akita: A New State Management Pattern for Angular Applications» Netanel Basal.
