Почему NGXS State Management?

Разве не было бы легко сохранить где-нибудь часть переменной или объекта, которые можно было бы отозвать в любой момент в любой момент? Что-то вроде библиотеки переменных, которая постоянна во всем приложении и может быть легко обновлена ​​и вызвана.

Любые изменения объекта, отныне известные как «состояние», также можно было легко просматривать и регистрировать, чтобы мы, как разработчики, могли видеть, произошло ли изменение и когда оно произошло.

На мой взгляд, здесь в игру вступает NGXS State Management. В этом случае он помогает веб-приложению или магазину приложений Ionic и эффективно управляет его состояниями, состоящими из объектов и переменных.

Благодарим Бишена Пателя за идею этого конкретного содержания.

Предварительное условие

  1. Знакомство с Ionic и Angular. Если вы никогда раньше не занимались разработкой с помощью Ionic, это отличный фреймворк, который упрощает вам разработку прогрессивных веб-приложений и мобильных приложений.
  2. Знакомство с TypeScript. Большая часть работы будет выполняться в TypeScript, поэтому требуется небольшое знакомство с TypeScript.

В данном конкретном примере я буду использовать Ionic версии 5 (Angular) с Ionic CLI (интерфейс командной строки) версии 6.13.1.

Мы будем использовать документацию по SpaceX API, которая бесплатна и может быть легко доступна здесь:



Документация по r / SpaceX API
ВНИМАНИЕ: API V3 устарел с ноября 2020 года! Все существующие ссылки будут продолжать работать, но новые данные не будут… docs.spacexdata.com



Не волнуйтесь, мы не будем тянуть API для запуска ракеты. Ничего подобного. Мы будем использовать простой API для получения информации о SpaceX как о компании.

Это будет простой запрос GET со следующего URL-адреса:

Https://api.spacexdata.com/v3/info

Приведенная выше ссылка должна возвращать объект JSON, содержащий информацию о компании SpaceX.

0. Начать ионный проект

Я не могу это подчеркнуть, если вы не знакомы с Ionic, перейдите на этот веб-сайт, чтобы начать:



Кросс-платформенная разработка мобильных приложений: Ionic Framework
Платформа разработки приложений Ionic Framework позволяет создавать потрясающие кроссплатформенные мобильные, веб- и настольные приложения с помощью одного… www .ionicframework.com



Убедитесь, что вы выбрали Angular в качестве основного фреймворка, который будет использоваться в Ionic.

1. Установите NGXS.

Затем нам нужно установить NGXS, где мы будем организовывать состояния.

npm install @ngxs/store --save

Также неплохо установить следующие библиотеки NGXS, которые помогут нам выйти из системы и сохранить наши состояния:

Подключаемый модуль Logger:

npm install @ngxs/logger-plugin --save

Плагин магазина:

npm install @ngxs/storage-plugin --save

2. Использование сервиса для вызова API и сохранения в состоянии

Создайте службу для вызова API SpaceX. Я собираюсь называть эту услугу Сетевой службой. Чтобы сгенерировать эту службу в Ionic, выполните в командной строке следующую команду:

ionic g service ngxs/network

Это создаст папку с именем ngxs с файлом network.service.ts внутри папки.

В нашем файле network.service.ts добавьте следующее для вызова SpaceX API.

Строки с 10 по 12 - это функция, в которой мы вызываем сервер SpaceX.

Обратите внимание: для простоты я буду использовать типичную библиотеку Angular / common / http. Я бы рекомендовал использовать HTTP-библиотеку Ionic Capacitor, если вы планируете создать мобильное приложение.

3. Настройка файлов NGXS

Создайте следующие файлы в папке ngxs, созданной на предыдущем шаге:

ngxs / action.ts

ngxs / state.ts

Обратите внимание. В некоторых случаях вам может потребоваться создать файл interface.ts для объявления interface.ts. Однако это простое руководство, и я хочу упростить его. Я объявлю интерфейс в самом файле state.ts вместо использования другого файла.

В файле action.ts объявите действие в файле action.ts следующим образом:

Вышеупомянутое действие будет вызвано позже в нашей функции диспетчеризации магазина. Не беспокойся об этом пока.

Затем в нашем файле state.ts нам нужно сделать 3 вещи:

  1. Объявить интерфейс
  2. Объявить модель
  3. Объявите действие, которое будет выполнено при выполнении вышеуказанной функции.

Наш файл state.ts должен выглядеть примерно так:

  • Обратите внимание, что мы объявили свое действие из action.ts в строке 4
  • Мы также объявили Injectable () для использования нашего SpaceXInfoState
  • Строка 7–30 - это то место, где мы объявляем интерфейс. Этот интерфейс основан на ожидаемом результате при вызове API.
  • В строке 32 мы объявляем начальное состояние и даем нашему состоянию имя, в данном случае его SpaceXInfoState.
  • Мы также заявили о нашей сетевой услуге в строке 40
  • Строка 42 - строка 52 - это место, где мы выполняем функцию и сохраняем ответ в нашем состоянии с помощью patchState ()

4. Настройка NGXS на app.module.ts

Теперь, когда мы проделали всю тяжелую работу с файлами сетевых служб, состояний и действий, мы, наконец, готовы объявить NGXS в нашем файле app.module.ts, чтобы мы могли использовать NGXS в нашем приложении.

Наш файл app.module.ts должен выглядеть примерно так:

  • Строки 9, 10 и 11 - это то место, где мы импортируем свойства NGXS в наше приложение, те, которые мы установили ранее.
  • Мы добавляем импортированные модули в наш список импорта модулей в строках с 23 по 31.
  • В NgxsModule я добавил SpaceXInfoState (импортированный в строку 14) в список состояний, которые будут использоваться в этом приложении. Если в файле action.ts объявлены другие состояния, добавьте их сюда.
  • Также обратите внимание, я добавил HttpClientModule (строка 13 и строка 32). Если вы используете метод HTTP-конденсатора, добавлять его не требуется.

5. Использование store dispatch () для получения данных.

Теперь нам нужно выполнить созданное нами действие. В моем случае я выполню функцию из нашего файла home.page.ts. Наш файл home.page.ts должен выглядеть примерно так:

  • Строки 2–4 - это то место, где мы импортируем Select, Store наше действие (GET_SPACEX_DATA) и наше состояние (SpaceXInfoState).
  • The ionViewWillEnter() функция будет выполняться каждый раз при загрузке домашней страницы. В этой функции мы используем store.dispatch для выполнения действия, которое мы объявили в state.ts
  • Чтобы извлечь и объявить данные, я также объявил функцию getData(), которая будет выполняться, когда store.dispatch завершит свой запуск.
  • Внутри функции getData() мы используем selectSnapshot для назначения данных переменной cto_propulsion и переменной founded. Теперь мы можем использовать cto_propulsion и founded в нашем HTML так, как мы считаем нужным, как в любом типичном угловом проекте.

Итак, готово, легкий лимонный сок. То, что показано выше, - это простой способ использования хранилища NGXS и selectSnapshot для получения данных из вашего состояния. Состояние будет оставаться до тех пор, пока сеанс остается действительным.

На этом можно закончить, и все будет нормально, но за дополнительные баллы…

…еще кое-что…

БОНУС: Использование селектора магазина для получения данных

Вы также можете использовать селектор магазина для получения асинхронных данных из вашего состояния. Нам нужно добавить в наш файл state.ts следующее:

  • В приведенном выше файле state.ts я добавил селектор ceo в строке 42 до строки 45.
  • Теперь мы можем использовать ceo selector внутри home.page.ts следующим образом:
  • В приведенном выше примере home.page.ts я добавил ceo$ в строке 14. Это должно создать асинхронную переменную, которую вы можете использовать в своем файле Angular HTML. Любые изменения в состоянии ceo будут отражены непосредственно в переменной ceo$ без какого-либо дополнительного вызова функции.

Вот и все. Вышеупомянутый метод ни в коем случае не является исчерпывающим, но это простой метод, демонстрирующий, как использовать управление состоянием NGXS для хранения данных, которые легко доступны в любом месте вашего приложения Ionic.

Надеюсь, что приведенная выше статья предоставит вам полезное руководство по использованию NGXS в вашем приложении.

Селамат Менгатуркара

Больше контента на plainenglish.io