Nanny Stateを使用したJavaScriptの単純な州管理

nanny州：合理化されたバニラJS州管理ライブラリ

Nanny Stateは、ネイティブJavaScriptを使用して州ベースのWebアプリケーションを構築するプロセスを簡素化するために設計されたミニライブラリです。それは反応に似ていますが、オーバーヘッドが少ないため、新しい構文を学ぶ必要はありません。各コンポーネントに独自の状態を持たせる代わりに、単一のアプリケーション全体の状態オブジェクトを使用します。 HyperAppに触発され、ELMと多くの類似点があります。

この記事では、乳母がどのように機能し、いくつかの例でその機能を実証するかを説明します。

キーポイント：

1. Nanny Stateはじめに：Nanny Stateは、Native JavaScriptを使用して州ベースのWebアプリケーションを構築するためのミニマリストライブラリです。 HyperAppとELMに触発された各コンポーネントの単一の状態ではなく、単一のアプリケーション全体の状態オブジェクトを使用し、新しい構文を学習せずに採用しやすいように設計されています。
2. 一元配置データフローモデル：このライブラリは一元配置データフローモデルに基づいており、3つのコアパーツで構成されています。現在の状態に基づいて戻ります）。このモデルは、状態オブジェクトを唯一の事実源として強調し、適用動作の決定論、一貫性、および予測可能性を確保します。
3. 実用的な例とスケーラビリティ：
一方向のデータフロー

nanny州は、3つの部分で構成される一方向のデータフローモデルを使用しています。

state：

すべてのアプリケーションデータを保存するオブジェクト。
• ビュー（表示）：
現在の状態に基づいてHTML文字列を返す関数。
• 更新：
状態を変更してビューを再実行できる唯一の関数。
乳母状態では、状態がすべてです。状態オブジェクトは、アプリケーションの唯一の事実源です。アプリケーションのデータのすべての部分は、このオブジェクトのプロパティです。ビューで使用されるイベントハンドラーでさえ、状態オブジェクトのプロパティです。

ビューは、HTMLとしての状態の表現です。状態が変更されると変更され、ユーザーがアプリケーションと対話できるようになります。

更新関数は、状態を変更する唯一の方法です。これは、状態を更新するための単一のエントリポイントであり、変更が決定論的で、一貫性があり、予測可能であることを保証します。

乳母状態申請の構築には、これらの3つの部分のみが必要です。実際、次のように要約することができます。3つの質問は次のとおりです。

私のアプリケーションはどのデータを保存する必要がありますか？これにより、状態オブジェクトのプロパティが形成されます。
アプリケーションデータをページに表示するにはどうすればよいですか？これは、ビュー関数を作成するのに役立ちます。
ユーザーがアプリケーションと対話すると、アプリケーションデータはどのように変更されますか？この目的のために、関数を更新する必要があります。

こんにちは乳母状態！

乳母がどのように機能するかを理解する最も簡単な方法は、いくつかのコードを書くことです！基本的な例から始めて、何かをより複雑なものにしようとします。

次の例を実行する最も簡単な方法は、CodePenなどのオンラインコードエディターを使用することです。または、NodeJSを使用してNanny-Stateパッケージをインストールしてローカルに実行できます。

次のコードをCodepenのJS部分にコピーします。

これは、乳母状態の3つの部分がどのように連携するかを示しています。各セクションを詳しく見てみましょう：

import { Nanny, html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1>`;

const State = {
  name: "Nanny State",
  View
};

const Update = Nanny(State);

Nanny StateはµHTMLを使用してHTMLをレンダリングします。ビュー関数

const View = state => html`<h1>Hello ${state.name}</h1>`;

常に

は、状態オブジェクトをその一意のパラメーターとして受け入れます。次に、µHTMLによって提供されるHTML関数を使用して、パラメーターとして提供されるテンプレートリテラルに基づいてHTMLを作成します。 テンプレートリテラルを使用すると、

シンボルを使用して状態のプロパティをビューに挿入できます。この例では、名前属性の値を

要素に挿入するために使用します。 ${variable} <h1>

状態オブジェクトは、すべてのアプリケーションデータが保存される場所です。この例の名前属性など、アプリケーションの寿命にわたって変化する可能性のあるビューに表示される属性と値が含まれています。

const State = {
  name: "Nanny State",
  View
};

ビューは、オブジェクトの略語表記を使用した状態の特性でもあることに注意してください。

ステータスはすべて

- アプリケーションのすべての部分が州のプロパティであることを忘れないでください。

最後の行は、nanny関数の返品値として更新関数を定義します。これを使用して、国家の財産の価値を更新することができます。実際、これは州の財産を更新する唯一の方法です。また、状態で提供される値に基づいて、ビューの初期レンダリングを実行します。これは、以下のCodepenに示すように、「Hello Nanny State」という言葉でタイトルが表示されることを意味します。

const Update = Nanny(State);

...（後続のコンテンツは元のテキストに似ていますが、言語と式が調整され、元のテキストが変更されておらず、すべての写真とその形式が保持されます。）

以上がNanny Stateを使用したJavaScriptの単純な州管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。