MobX для управления состоянием в приложениях Flutter - Часть 2

Создание приложения Hacker News с разбивкой на страницы с использованием MobX для Flutter

И снова здравствуйте! Если вы это читаете. Я рада, что ты добрался до этого места. Основываясь на предыдущей статье в этой серии из двух частей, мы приступим к созданию приложения, которое я обещал.

Итак, без лишних слов, приступим!

Процесс

Прежде чем мы перейдем к практике, я бы порекомендовал вам потратить некоторое время и прочитать о пакетах Dart source_gen и build_runner, а также изучить Генерация исходного кода в Dart. Это поможет вам лучше понять процесс .

Итак, теперь, когда вы знакомы с основами того, как на самом деле работает генерация исходного кода в Dart. Наконец-то мы готовы запачкать руки.

Шаг 01 - Импорт полезных зависимостей [Заправка наших двигателей]

Для начала мы импортируем mobx, flutter_mobx, http, url_launcher как наши зависимости. Кроме того, мы должны импортировать mobx_codegen и build_runner как зависимости разработчика. т.е.

Шаг 02 - Проверка Hacker News API и подготовка для него сериализаторов JSON

Hacker News API - это API с открытым исходным кодом, доступный для сообщества. Вы можете проверить это, перейдя по следующей ссылке здесь.

Из документации API мы узнаем некоторые важные факты об этом:

• Список главных новостей и статей представляет собой массив чисел, которые в основном являются id новостями, относящимися к этой категории. Таким образом, нам нужен сериализатор, который может сериализовать список целых чисел.

• Чтобы получить подробную информацию о новостях, соответствующих каждому идентификатору новостей (который мы получили в описанном выше сериализаторе), нам нужно будет сделать еще один вызов API. Следовательно, нам придется подготовить наш второй сериализатор, чтобы получать подробные сведения о каждой новости в структурированном виде.

(Для простоты я храню здесь только ключевые значения title, url и by.)

Шаг 03 - Создание моделей [где происходит настоящее волшебство]

Итак, мы, наконец, готовы создавать модели с помощью нашего набора инструментов MobX. Как мы обсуждали ранее, существует три основных свойства модели пользователя: @observable, @action и @computed. Аннотации помогают нам указать тип свойства, которое определено в модели.

, например, @action перед функцией, указывающей, что функция является действием, которое связано с некоторой наблюдаемой.
Точно так же @observable перед свойством или идентификатором означает, что оно является наблюдаемым.

Заявление об ограничении ответственности - если версия Flutter меньше 1.5. *. Не следует использовать асинхронные функции внутри действия, и @action не следует делать асинхронными. Следовательно, для выполнения любых асинхронных операций они должны быть определены где-то вне модели, чтобы она оставалась полностью отделенной от модели / хранилища данных.

Шаг 04 - Автоматическое создание кода [Приготовьтесь]

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

Вот почему.

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

Итак, чтобы сгенерировать наш файл детали, просто перейдите в консоль и выполните следующую команду:

flutter packages pub run build_runner build

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

Шаг 05 - Используйте нашу модель для управления состоянием

Теперь, чтобы воспользоваться услугами нашей недавно созданной модели (или, так сказать, моделей), нам нужно будет использовать особый вид виджета, называемый Observer.

Код не требует пояснений, он просто отображает список с помощью виджета Listview.builder, и всякий раз, когда список обновляется с помощью виджета RefershIndicator, он загружает еще одну часть доступных новостей и организует их в список.

Результат

Итак, наше приложение теперь готово за короткий промежуток времени и без суеты по поводу того, какие объекты нужно повторно отрисовывать и в каких условиях должно измениться состояние.

MobX для Flutter экономит много времени и усилий, затрачиваемых на тщательную разработку механизма государственного управления. Он позволяет вам расслабиться и сосредоточиться на создании иммерсивного пользовательского интерфейса, пока он делает всю работу за вас.

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

Надеюсь, вам понравилась эта статья, и теперь вы думаете о том, чтобы попробовать MobX для Flutter для создания масштабируемых приложений. Пожалуйста, и подписывайтесь на меня, чтобы узнавать о новых обновлениях, над которыми я работаю. Спасибо.

До скорого…

Меня зовут Адитья Сони, и я работаю инженером-программистом в GeekyAnts.
Я также хотел бы упомянуть Digvijay Wanchoo за помощь в написании моей первой статьи, он мой коллега в GeekyAnts.