Aureliaの管理状態の管理：AureliaをReduxで使用する方法

AureliaとReduxを使用して予測可能な状態でMarkdownエディターを構築します

この記事では、Aurelia FrameworkにReduxを統合する方法を調査し、UNDO/REDO機能を備えたMarkDownエディターを構築することにより、このプロセスを実証します。この記事は、基本的なAurelia設定、国家管理のための統合されたRedux、およびUNDO/REDO機能の追加の3つの段階に分かれています。

コアポイント：

Reduxは、アプリケーション状態の管理を簡素化する予測可能な状態容器を提供し、特に複雑な環境では一貫性があり、テストしやすくします。
ReduxとAureliaの統合には、Reduxストレージのセットアップ、依存関係の構成、Aurelia-Reduxプラグインでは非常にシンプルで簡単なストレージの接続が含まれます。
• このチュートリアルでは、AureliaとReduxを使用してMarkdown Editorの構築を実証しています。Redux-undoプラグインによって管理された元に戻す/redo機能しています。
• サンプルアプリケーションは、基本的なAureliaのセットアップ、国家管理のための統合Redux、およびUNDO/REDO機能の3つの段階に分割されます。
• Reduxの実装は、Aureliaの双方向データの結合に代わって、一方向のデータストリームに置き換えられ、ビューが状態の変化に応答する方法を変えます。

この記事は、MoritzKrögerとJedd Ahyoungによって査読されました。 SetePointのすべてのピアレビューアーズに感謝します。プレゼンテーションのスタイルをデザインしてくれたSimon Codringtonに感謝します。

今日、Webアプリケーションを開発するとき、人々は状態の容器、特にすべてのフラックスモードに細心の注意を払っています。 Reduxは、Fluxの最も顕著な実装の1つです。この波に追いついていない人のために、Reduxはあなたの状態の変化を予測可能に保つのに役立つライブラリです。アプリケーションの状態全体を単一のオブジェクトツリーに保存します。

この記事では、Reduxを使用する方法の基本を説明します。これは、新世代のオープンソースJavaScriptクライアントフレームワークであるAureliaです。しかし、別のカウンターの例を作成することはありません。もっと面白いことをします。取り消しおよびやり直しの機能を備えたシンプルなマークダウンエディターを構築します。このチュートリアルのコードはGitHubで入手できます。完成したプロジェクトのデモを次に示します。

注：新しいことを学ぶとき、私はソースに戻ることを好みます。Reduxの場合、Redux Creator（Dan Abramov）には素晴らしいEggheadビデオシリーズがあります。 Reduxの仕組みについて詳しく説明することはないので、レビューして数時間時間を過ごす必要がある場合は、このシリーズを試してみることを強くお勧めします。

チュートリアル構造：

この記事では、同じコンポーネントの3つのバージョンを構築します。

最初のバージョンでは、Pure Aureliaメソッドを使用します。ここでは、Aureliaアプリケーションをセットアップし、依存関係を構成し、必要なビューとビューモデルを作成する方法を学びます。双方向データバインディングを使用して、古典的なアウレリアの方法で例を構築します。

2番目のバージョンでは、アプリケーションの状態を処理するためにReduxを導入します。通常のアプローチを使用します。つまり、相互運用性を処理するための追加のプラグインがありません。このようにして、Aureliaのすぐに使える機能を使用して、Redux開発プロセスに適応する方法を学びます。

最終バージョンでは、undo/redo関数を実装します。そのような機能をゼロから構築する人は誰でも、始めるのは簡単だと知っていますが、物事はすぐに制御不能になる可能性があります。そのため、Redux-Undoプラグインを使用してこれを処理します。

記事を通して、公式のAureliaドキュメントへの複数の参照が表示され、詳細情報を見つけるのに役立ちます。すべてのコードマニフェストは、元のソースファイルにもリンクされています。

それで、それ以上のアドがなくても、始めましょう。

新しいAureliaアプリケーションを構築：

Aureliaとの相互作用に焦点を当てているため、この例はAureliaの好みのアプリケーション構築方法、つまりAurelia CLIに基づいています。

CLIドキュメントで説明されている手順によると、次のコマンドを使用してCLIをグローバルにインストールします。

npm install aurelia-cli -g

次に、次のコマンドを使用して新しいアプリケーションを作成します。

これにより、デフォルトの設定を使用するか、選択をカスタマイズするかどうかを尋ねるダイアログが開始されます。デフォルト値（esnext）を選択し、[プロジェクトの作成]を選択し、依存関係をインストールします。次に、新しいプロジェクトのフォルダー（CD Aurelia-Reduxを使用）に変更し、次のコマンドで開発サーバーを起動します。

au new aurelia-redux

すべてが計画どおりに進む場合、これにより、デフォルトのリスニングポート9000を使用して、BROWSERSYNC開発サーバーインスタンスが開始されます。さらに、アプリケーションに加えられた変更を追跡し、必要に応じて更新します。

au run --watch

バンドラーに依存関係を追加：

次のステップは、今後のプロジェクトに必要な依存関係をインストールすることです。 Aurelia CLIはNPMモジュールの上に構築されているため、次のコマンドを使用してこれを行うことができます。

わかりました、1つずつ紹介しましょう。マークされたのは、その名前が示すように、完全に機能的で使いやすいマークダウンパーサーとコンパイラです。 Reduxはライブラリ自体のパッケージであり、Redux-undoは、アプリケーション状態のコンテナに元気/やり直しを追加する単純なプラグインです。

舞台裏では、Aurelia cliがrequirejsを使用するため、すべての依存関係は非同期モジュール定義（AMD）形式を介して参照されます。今残っているのは、これらの依存関係をどこで見つけるかをAureliaアプリケーションに伝えることです。

npm install --save marked redux redux-undo

これを行うには、アプリケーションのAurelia-ProjectサブフォルダーにあるAurelia.jsonファイルを開きます。バンドルセクションまでスクロールすると、2つのオブジェクトが表示されます。 1つはアプリバンドルで、独自のアプリケーションコードが含まれており、もう1つはベンダーバンドルです。これは、すべてのアプリケーション依存関係を別のバンドルファイルにバンドルするために使用されます。オブジェクトには、依存関係と呼ばれるプロパティが含まれています。あなたはそれを推測しました。そこで、追加の依存関係を追加します。

Aurelia.jsonファイルの手動操作は現在必要なステップですが、将来のバージョンでは自動化されます。

カスタム依存関係を登録するには複数の方法があります。これは、対応する公式のAureliaのドキュメントに従うことで最もよく理解されています。次のコードを追加します：

npm install aurelia-cli -g

（以下のコンテンツは元のテキストに似ていますが、ステートメントの調整と段落部門は、より流fluentで読みやすくするために行われています。スペースの制限により、後続のコンテンツは簡単に要約されます。コアコードスニペットが保持されます。）

次は、アプリケーションの依存関係を接続し、スタイルを追加し、Aureliaを介してMarkdownエディターを実装し、Reduxを導入し、ビューを更新し、元に戻す/やり直しを実装し、最後に要約とFAQです。 これらの部分はすべて、元のテキストと同じロジックに従いますが、言語式はより簡潔で、コードが合理化され、コア機能が保持されます。

コアコードスニペットの例：

（reduxモードでのviewmodel）

（Redux-Style View）

au new aurelia-redux

（元に戻す/やり直すためのviewmodelが含まれています）

au run --watch

この記事は、アウレリアのReduxの利点と、Aurelia Data Binding Systemと併せてどのように機能するかを最終的に要約し、学習リソースとよくある質問への回答を提供します。 プロセス全体は、ReduxをAureliaアプリケーションに徐々に統合する方法を明確に示し、より高度な州の管理機能を実装しています。

以上がAureliaの管理状態の管理：AureliaをReduxで使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。