Unstated-Nextを使用した反応の状態の管理

この記事は、未定の、順調に描かれていない、その後継者を調査した国家管理の以前の議論に基づいています。 Unstated-Next Leverages React HooksとContext API Stremlined State Managementは、特にReactフックの進歩を考えると、前任者よりも効率的なアプローチを提供します。 Unstated-Nextを使用して、単一およびマルチコンポーネントの状態管理を調べます。以前の未記述の記事に精通していることは役立ちますが、厳密には必要ありません。

最小限のフォームコンポーネントの例

名前のテキスト入力と送信ボタンを使用して、単純なReactフォームを作成します。提出されると、名前はフォームの上に表示されます。完全なコードはGitHubで利用できます。この例では、Create React AppとBootstrapを使用しています。

まず、プロジェクトを設定します。

 npx create-react-app unstated-next-form
CD Unstated-Next-Form

unstated-nextをインストール：

 ＃糸
糸はunstated-nextを追加します

＃npm
npmインストール - ゼンスのネクストを節約します

必要なモジュールをApp.jsにインポートします：

 // src/app.js
「React」からReact、{UseState}をインポートします。
「unstated-next」から{createcontainer}をインポート。

カスタムフックを作成します：

 // src/app.js
// ...以前の輸入

const useform =（）=> {
  const [input、setValue] = uesestate（ ""）;
  const [name、setname] = uesestate（ "Barney Stinson"）;

  const handleInput =（event）=> setValue（event.target.value）;
  const updatename =（event）=> {
    event.preventdefault（）;
    setName（input）;
    setValue（ ""）;
  };

  return {入力、名前、handleInput、updatename};
};

createContainerを使用してコンテナを作成します。

 // src/app.js
// ...前のコード

const formcontainer = createcontainer（useform）;

フォームコンポーネントを作成します。

 // src/app.js
// ...前のコード

const form =（）=> {
  const form = formcontainer.usecontainer（）;
  戻る （
    <div>
      <p>こんにちは！ {form.name}</p>
      <form onsubmit="{form.updateName}">
        <input type="text" value="{form.input}" onchange="{form.handleInput}">
        <button type="submit">保存</button>
      </form>
    </div>
  ）;
};

フォームコンポーネントをアプリコンポーネントのプロバイダーと一緒にラップします。

 const app =（）=>（
  <formcontainer.provider>
    <form></form>
  </formcontainer.provider>
）;

これにより、最小のフォームの例が完了します。これらの概念を使用して、簡単なTo Doアプリケーションを構築してみてください。参照リポジトリが利用可能です。

複数のコンポーネントにわたって状態を共有します

この例は、フォームとTo Doリストの間で状態を共有することを示しています。フォームで更新されたユーザーの名前は、To-Doリストに反映されます。

新しいプロジェクトを作成し、依存関係をインストールします。

 npx create-react-app unstated-next-app
CD Unstated-Next-App
糸はunstated-next shortidを追加します

共有状態を管理するためにstore.jsを作成します：

 // src/store.js
「React」から{ueseState}をインポートします。
「ShortID」からShortIDをインポートします。
'unstated-next'から{createContainer}をインポート。

const usestore =（）=> {
  const [input、setValue] = uesestate（ ""）;
  const [name、setname] = uesestate（ "Barney Stinson"）;
  const [todos、setodos] = uesestate（[{id：1、title：write code '}、{id：2、title：' buy milk '}]）;
  const [item、setitem] = uesestate（ ""）;

  const handleInput =（event）=> setValue（event.target.value）;
  const updatename =（event）=> {
    event.preventdefault（）;
    setName（input）;
    setValue（ ""）;
  };
  const handleItem =（event）=> setItem（event.target.value）;
  const handleSubmit =（event）=> {
    event.preventdefault（）;
    setodos（[... todos、{id：shortid.generate（）、title：item}]）;
    setitem（ ""）;
  };

  return {input、name、handleInput、updatename、todos、item、handleitem、handlesubmit};
};

const storecontainer = createcontainer（usestore）;

form.jsを作成：

 // src/form.js
「React」からのImport React;
"./store"から{storecontainer}をimport;

const formComponent =（）=> {
  const form = storecontainer.usecontainer（）;
  戻る （
    <div>
      <p>こんにちは！ {form.name}</p>
      <form onsubmit="{form.updateName}">
        <input type="text" value="{form.input}" onchange="{form.handleInput}">
        <button type="submit">名前を変更します</button>
      </form>
    </div>
  ）;
};

デフォルトのフォームコンポーネントをエクスポートします。

todo.jsを作成：

 // src/todo.js
「React」からのImport React;
"./store"から{storecontainer}をimport;

const todocomponent =（）=> {
  const todo = storecontainer.usecontainer（）;
  戻る （
    <div>
      <p>Todosを追加します</p>
      <form onsubmit="{todo.handleSubmit}">
        <input type="text" value="{todo.item}" onchange="{todo.handleItem}">
        <button type="submit">追加</button>
      </form>
      <p>親愛なる{todo.name}、ここにあなたの現在のタスクがあります：</p>
      <ul>
        {todo.todos.map（（item）=><li key="{item.id}"> {item.title}</li> ）}
      </ul>
    </div>
  ）;
};

デフォルトのdocomponentをエクスポートします。

App.jsを更新：

 「React」からのImport React;
"./todo"からtodocomponentをインポートします。
"./form"からformcomponentをインポートします。
"./store"から{storecontainer}をimport;

function app（）{
  戻る （
    <storecontainer.provider>
      <formcomponent></formcomponent>
      <todocomponent></todocomponent>
    </storecontainer.provider>
  ）;
}

デフォルトアプリをエクスポートします。

この改訂された例は、Unstated-Nextを使用して、複数のコンポーネントにわたる状態共有のより完全かつ機能的な図を提供します。生産環境で潜在的なエラーとエッジケースを処理することを忘れないでください。

以上がUnstated-Nextを使用した反応の状態の管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。