Автор Карлос Лира
Почему мои приложения должны использовать API с флаттером и Redux?
Большинство людей встречают Redux только тогда, когда сталкиваются с React, и усваивают архитектуру как вещь React… Это очень печально, потому что это чертовски круто! Это однонаправленная архитектура потока данных, созданная для любого пользовательского интерфейса, также известного как уровень пользовательского интерфейса, она позволяет вам прикреплять функции, которые будут делать такие вещи, как отправка HTTP-запроса в API и отправка ответа вашему устройству смены состояния - мы обсудим это в какое-то время. Но это более полезно в сочетании с реализацией декларативного представления, которое может делать выводы об обновлениях пользовательского интерфейса на основе изменений состояния, таких как Flutter!
Промежуточное ПО Redux
Краткое объяснение, прежде чем мы продолжим. Redux позволяет вам включать пользовательские функции, которые обрабатывают действие до того, как оно будет отправлено следующему диспетчеру и, в конечном итоге, редуктору для формирования нового состояния. Эти функции называются промежуточным программным обеспечением.
Они действительно пригодятся во многих сценариях, например: вы выполняете вызовы API, и ответ на эти вызовы влияет на состояние вашего приложения. Что вы должны сделать? Прежде всего, используйте Redux, это значительно упростит вам жизнь, все данные, которые имеют значение для пользовательского интерфейса, будут централизованы в синглтоне состояния и будут доступны, когда вы захотите. Как вы знаете, flutter использует Dart, есть два промежуточных программного обеспечения, которые нам помогут: redux_api_middleware и redux_thunk.
Исходное промежуточное программное обеспечение thunk - это реализация javascript, которую вы можете найти здесь. Промежуточное ПО thunk, которое мы будем использовать, было перенесено на Dart Брайаном Иганом. Исходное промежуточное ПО API также представляет собой реализацию javascript, которую вы можете найти здесь. ПО промежуточного слоя API было портировано мной на Dart, проверьте его на моем GitHub: D
Промежуточное программное обеспечение thunk позволяет отправлять асинхронные вызовы, что идеально подходит для промежуточного программного обеспечения API, поскольку HTTP-запросы являются асинхронными. По промежуточного слоя API делает именно то, о чем вы думаете: оно вызывает API и отправляет ответ вашему редуктору, чтобы вы могли определить следующее состояние приложения.
Мы также добавим промежуточное ПО для ведения журналов, чтобы мы могли легко видеть трафик, проходящий через наше промежуточное ПО.
В этом руководстве мы рассмотрим следующие темы:
- Создайте новый проект Flutter.
- Добавьте зависимости.
- Создайте файлы, связанные с Redux, такие как действия и редукторы.
- Отредактируйте точку входа в приложение.
- Добавьте регистратор запросов API.
- Создайте маршруты приложения.
- Создайте компоненты пользовательского интерфейса.
В этом уроке я буду использовать расширение флаттера VSCode. При этом давайте писать код!
Создать новый проект флаттера
- Вызов представления ›Палитра команд.
- Введите «Flutter » и выберите Flutter: New Project.
- Введите имя проекта, например myapp, и нажмите Enter.
- Создайте или выберите родительский каталог для новой папки проекта.
- Дождитесь завершения создания проекта и появления файла main.dart.
Добавьте зависимости
Ваше приложение Flutter ищет свои зависимости в разделе зависимостей pubspec.yaml. Давайте изменим этот файл, чтобы добавить наши зависимости. Нам понадобятся redux, flutter_redux, redux_thunk и redux_api_middleware.
Как вы уже знаете, сообщество Flutter растет с каждым днем, как и количество библиотек и компонентов, которые вы можете использовать в своем приложении. Эти библиотеки и компоненты сообщества потенциально имеют уязвимости, которые вы можете добавить в свое приложение, если не будете осторожны.
Чтобы избежать этого, всегда проводите небольшое исследование перед их использованием, проверяйте, сколько людей их использует, всегда используйте обновленную версию, потому что в предыдущих версиях уже могли быть исправлены уязвимости, и, если вы чувствуете себя комфортно, проверяйте код на предмет возможных уязвимостей.
При этом на момент написания мой файл pubspec.yaml выглядел так:
Создайте структуру Redux
Прежде всего, давайте создадим базовую структуру папок для нашего приложения. Создайте эти папки в папке lib: models, actions, reducer и components . После этого ваша структура папок lib должна выглядеть так :
lib
├── actions
├── components
├── models
├── reducers
└── main.dartНазвания наводят на размышления, но не помешает немного о них поговорить.
Папка models - это то место, где будет находиться наше сопоставление данных, мне нравится разделять их по модулям, например: у нас есть пользовательский модуль, поэтому все модели, относящиеся к этому модулю, должны создаваться внутри пользователь в папке модели.
В папке actions будут находиться наши действия, я люблю разбивать их по модулям, например: у нас есть пользовательский модуль, поэтому все действия, относящиеся к этому модулю, должны быть в user_actions. dart в папке actions.
Папка redurs - это то место, где будут находиться наши редукторы, мне нравится разделять их по модулям, например: у нас есть пользовательский модуль, поэтому все редукторы, относящиеся к этому модулю, должны быть в user_reducer. dart в папке reducer.
Папка components - это то место, где будут находиться наши компоненты, но то, как мне нравится ее организовывать, безусловно, вызывает споры, как и все другие папки, я также разделяю компоненты как модули вместо типичного разделения представления. и контейнеры. Я не против, просто предпочитаю модульную организацию. При желании вы можете использовать подход представления и контейнеров, но в этой статье я буду использовать разделение модулей.
Создайте модель пользователя и пользовательского состояния
Я воспользуюсь описанным выше подходом, но не стесняйтесь изменять его по своему усмотрению. Создайте папку user в папке models, затем создайте user.dart и user_state.dart в папке Папка user.
Теперь создайте user_state.dart в папке user.
Создайте модель состояния приложения
Модель состояния приложения централизует все состояние приложения в синглтоне, включая состояние пользователя, описанное выше. Создайте app_state.dart в папке models.
Создайте несколько RSAA
Действия, вызывающие стандартные API-интерфейсы Redux, также известные как RSAA, - это типы действий, которые redux_api_middleware перехватывают и содержат определение запроса. В этом руководстве мы будем использовать образец API для отдыха, предоставленный JSONPlaceholder. Создайте user_actions.dart в папке actions.
Создайте редуктор пользователя
RSAA отправляют стандартные действия Flux, также известные как FSA, которые содержат отправленный тип, полезную нагрузку ответа и ошибку в случае ее возникновения. Этот FSA будет отправлен в редуктор пользователя, и редуктор вернет новое состояние на основе FSA. Создайте user_reducer.dart в папке reducer.
Создайте редуктор приложения
Редуктор приложения объединяет все редукторы, поэтому они доступны из синглтона AppState. Создайте app_reducer.dart в папке reducer.
Отредактируйте main.dart
Этот раздел довольно прост, наш метод сборки вернет StoreProvider из пакета Redux, который будет управлять нашим магазином и позволит ему быть доступным через StoreConnectors, о котором мы поговорим. через минуту. Отредактируйте файл main.dart.
Вы заметите, что отсутствует промежуточное ПО для ведения журналов, маршруты приложений и экраны. Давай исправим это.
Создайте промежуточное ПО для ведения журнала
Это будет очень просто, это промежуточное ПО, которое перехватывает FSA и выводит их тип, полезную нагрузку и ошибку. Создайте файл logger.dart в папке lib.
Создайте маршруты приложений
Это просто способ организовать наши именованные маршруты. Создайте routes.dart в папке lib.
Создайте экран пользователей
Экран пользователя представляет собой StatelessWidget, потому что ему не нужно собственное состояние. Он подключается к магазину и имеет доступ ко всем данным приложения, нам нужно только отобразить состояние в «реквизиты», я еще не уверен насчет этого термина, но это то, что я использую, как только мы это сделаем, конструктор из StoreConnector должен иметь параметр props, который можно использовать через наш компонент, и, как вы можете видеть, мы также сопоставляем действия, чтобы мы могли легко их использовать. Создайте users_screen.dart в папке components / users.
И наконец…
Создайте экран сведений о пользователе
Экран сведений о пользователе представляет собой StatelessWidget, потому что ему не нужно собственное состояние. Он динамически вызывает промежуточное ПО API и отправляет состояния, а пользовательский интерфейс прекрасно это отражает. Создайте user_details_screen.dart в папке components / users.
Пора запустить приложение и насладиться им…
Совет по безопасности
Большинство API-интерфейсов, которые мы используем в приложениях, каким-то образом аутентифицируются. И мы не хотим каждый раз запрашивать учетные данные пользователя. Таким образом, мы хотим сохранить эти учетные данные, чтобы упростить нашу жизнь и жизнь пользователей, но это опасно, поскольку другие приложения могут иметь доступ к этому конкретному файлу, и он может стать вектором атаки. Существует библиотека под названием flutter_secure_storage, которая решает эту проблему. Он использует встроенную Связку ключей на IOS и KeyStore на Android. Так что да ... Используйте его, если храните учетные данные пользователя.
Заключение
Забудьте о том, что Redux - это реактивный пакет! Используйте его везде, где можете, это облегчило мне жизнь, и я надеюсь, что я тоже немного сделал вашу: D
Я знаю, что флаттер - новая и свежая технология, но она чрезвычайно продуктивна, с ней легко работать, и я верю, что у нее блестящее будущее. Я был удивлен, увидев Дарт, его очень легко выучить и кодировать весело, он немного напоминает мне javascript.
Полный проект будет в моем GitHub, если он вам понадобится. Вы можете связаться со мной в моем LinkedIn, если вам понадобится помощь, критика или просто хотите поговорить о своих проблемах.
Если вам нравится это чтение, расскажите мне об этом в комментариях и запомните самое главное: гифки с кошками хлопают в ладоши ...
