AsyncReduxとGraphQLを使用してFlutterでアプリケーションを開発する。

まず、パラシュートを持ってここに落ちた場合、ここに表示されるのは、私が持っていたアイデアを検証するための概念の証明（PoC）にすぎません。新しい知識を理解し、抽象化することはおそらくあなたにとって役立つでしょう。

フラッター

これは、Googleによって作成されたオブジェクト指向のプログラミング言語であるDartで開発するオープンソースSDKであり、JavaScriptを置き換えることを主な目的として2013年に最初のバージョンがリリースされました。2018年にリリースされたバージョン2.0は、多くの点で完全に最適化および改善されており、そのうちの1つは、アプリ、Web、およびデスクトップのクライアント側に焦点を当てています。

Flutterはネイティブコンポーネントを使用しないため、ボタン、テキスト、メディア、背景など、すべてグラフィック エンジン自体によってレンダリングされます。ただし、コンポーネント（別名ウィジェット）が宣言的に記述されているReactに触発されており、もちろん、ホットリロードがあります。

状態管理

現在のアプリケーションでは、Sテイト・マネジメントは 、データ間のインタフェース（何からあなたのあるバックエンド）または局所的変化とのユーザーインターフェイス要素と、これらのデータの表現フロントエンド。国家は、すべてのステータスの更新は、関連するすべてのコンポーネントを再表示するので、同期方法で、異なるコンポーネントのデータを保持することができます。状態managemen Tは、異なるコンポーネント間の通信手段として機能することができます。

Flutterには、状態を管理するためのいくつかのオプションがあり、以下のリンクで、Flutterチーム自体が推奨するオプションを見つけることができます。

非同期Redux

私はすでにReactでReduxと協力しているので、Reduxが州の管理者として持つ力をすでに知っているので、同じ「方法」で開発できるライブラリを探しました。そこで、Flutter Reduxというライブラリを見つけましたが、定型文がたくさんあるので、別のライブラリを探すことになりました。私が最も気に入ったのはAsyncReduxと呼ばれ、非常に理解と実装が簡単で、多くの機能があり、ドキュメントは素晴らしいものです！おめでとうマルセロGlasberg素晴らしい仕事との感謝のためにコードレビューこのアプリ！

GraphQL

これは、2015年にFacebookによって開発およびリリースされたAPIのクエリ言語です。その主なツール：Q uery、M utation、およびSubscription。この例では、クエリとミューテーションのみを使用します。

2019年4月、フロリアノポリスで開催された開発者会議で、.NETアーキテクチャトレイルについて講演しました。.NET Coreの実際的な例を使用して、既存のRESTアーキテクチャを進化させる方法について説明しました。以下に私はリポジトリを残します：

https://github.com/oguibueno/TDC2019

ハンズオン！

プロジェクトは次のように構成されており、ビジネスとクライアントが分離されています。どこの事業は 、当社の状態管理やAPIへのアクセスを持っており、クライアントが私たちの持っているウィジェットを多くのロジックとの結合が存在しない場合。

それらが使用されたライブラリは、pubspec.yamlファイルにあります。

async_redux: 2.1.5
graphql: ^2.1.0

主なエントリは次のようになりますTodosConnectorたちのための「プラグイン」の一種として働き、TodosPageとTodoModel、そして私たちのこの手段ウィジェットは状態マネージャに依存しません。コードをよりクリーンでモジュール化する。

AppStateはの重要な一部である非同期Reduxの、それは私達が私達の状態の情報にアクセスできることがあるため、。アプリケーション全体でAppStateは1つだけになります。

copyメソッド は、新しい状態を生成し、13行目と14行目で古い状態と新しい状態の間に「慣らし運転」を行います。

todolistのは、で始まる配列の空隙すべてのライン16に、。

これは、TodosPageが実行できるすべてのアクションがマップされ、そのコンストラクターに挿入される場所です。

アプリケーションを開いたとき、私たちが使用するデータを格納するためのリストonInitialBuildでクエリを実行するためにGraphQLのAPIウィジェットが最初に構築されているとすぐに、。

ディスパッチに必要なアクションをマップするのはTodoModelです。また、このコンテキストで公開するデータである、状態からのデータもここにマップされます。この場合、我々は、というプロパティ持っtodolistのそれはから移入されstate.todoListから来fromStoreを（） 。ディスパッチと状態の両方がAsyncRedux自体によって注入されます。これにより、コードの量が大幅に削減され、よりクリーンで読みやすくなります。

https://pub.dev/packages/async_redux#connector

私たちは、定義する必要が減速非同期であるので、我々はとして定義非同期。呼び出しとしてエンドポイントのGraphQLの未来、そして我々は作るべき待つライン29で、この外来方法を。

https://pub.dev/packages/async_redux#async-reducer

queryOptionsがあるに送信されるオブジェクトGraphQL含む、この場合、クエリライン10上に位置しています、。

GraphQLClientAPIは、iOSのエミュレータのURLライン7のAndroidエミュレータのURLに置く私たちのAPIの構成で、ライン8インチ

リクエストにエラーがない場合、結果はリストに変換され、Todoタイプにマップされるため、状態を更新してstate.copyを作成します。

これが一種の「実体」として機能する全体です。

APIを要求した後、レデューサーは新しいステータスで新しいコピーを作成し、そこで変更を加えます。私たちのようTodosPageがを通じて接続されているTodoModelでStoreConnector、とtodolistのは、建設に注入したTodosPage、我々はAPIからデータをListViewコントロールを移入ので、カードがライン31には、組み立てられています。

PS：ステータスを更新したくない場合は、nullを返します。

私たちのメインリストは次のようになります：

GraphQL APIは、NodeとExpressを使用して構築されました。エンドポイント上の例に示されているが、使用されるクエリを すべて内スキーマ以下。

スキーマを定義した後、45行目でクエリを定義します。このクエリは、3つの項目で初期化された配列であるtodosMockを使用します。ルートが定義された後、それはExpressアプリに 注入され、ポート4000のendpoint / graphqlで公開されます。

でGitHubに、あなたは見つけるでしょう、完全ためのCRUDこのアプリケーションを。

ありがとう！

感謝マルセロGlasberg、の生みの親非同期Reduxの気配りだったと自身が利用可能に作ら、見直しこの公報に示さフラッタコードを。

GitHub

フラッターアプリケーションリポジトリ

GraphQLを使用したノードAPIリポジトリ

連絡先

LinkedIn

ツイッター

便利なリンク

Flutter用のAsyncRedux：定型文のない ReduxNode.jsとExpressを使用してGraphQLサーバーを作成する