開発者ドキュメント

React値を使用した簡単な状態管理

getdocs

それは私たちの最善に起こります。 クリーンで保守可能なコードを作成するという最善の意図を持って、新しいプロジェクトを開始します。 プロジェクトに1〜2か月早送りすると、20の異なる場所に同じブールトグル状態が実装されました。 複数の開発者が同じ状態ロジックを異なる方法で実装している場合、事態はさらに悪化します。 幸いなことに、 react-values はその日を救うためにここにあります！

react-values は、レンダリングプロップを使用してコンポーネントの状態を簡単に管理できるようにする構成可能なReactコンポーネントのセットです。 単一の値の状態管理をすばやく追加したり、ブール値を切り替えたり、数値をインクリメント/デクリメントしたり、オブジェクトなどのより複雑なデータ構造を管理したりすることもできます。

の目標の1つ react-values プロジェクトは、ReactとJavaScriptの両方でおなじみの規則に従うことです。 この良い例は ArrayValue 次のようなメソッドを提供するコンポーネント push と pop.

単一のスコープでの状態管理に限定されません。 react-values 接続されたコンポーネントを使用すると、コンポーネント内またはアプリ全体で複数回使用できる値を作成できます。

制御されていないコンポーネントではなく、制御されたコンポーネントを使用したいというシナリオはありますか？ 単にあなたを渡す react-values コンポーネントa value また defaultValue そして、あなたは行ってもいいです。

入門

遊んでみる準備ができました react-values?

素晴らしい！ インストールを開始します react-values を介した依存関係 npm:

$ npm install --save react-values

または経由 yarn:

$ yarn add react-values

次に、 react-values 使用したいコード内：

import ReactValues from "react-values";

または、すべてが必要ない場合は、個々の値をインポートできます。

import { BooleanValue } from "react-values";

基本的な状態管理

コンポーネントの状態管理に関しては、私が個人的に少なくとも100回ほど実装したことが2つあります。 1つは、ユーザーが入力した文字列の格納です。

react-values が付属しています StringValue 文字列を状態に格納するために必要なすべてのボイラープレート（初期状態の設定、変更ハンドラーの書き込みなど）を削除するコンポーネント：

<StringValue>
  {({ value, set }) => (
    <input type="text" onChange={e => set(e.target.value)} />
  )}
</StringValue>

他の主要な違反者はブールトグルです。 単純なチェックボックスを使用する場合でも、派手なスライダーを使用する場合でも、基盤は同じになる傾向があります。 初期状態を確立してから、変更時ハンドラーを記述します。

に似ている StringValue 使用できます BooleanValue そして物事を調理する：

<BooleanValue>
  {({ value, toggle }) => (
    <input type="checkbox" onClick={toggle} checked={value} />
  )}
</BooleanValue>

状態変化の観察

前の例は、コンポーネント自体の状態を追跡するだけでよい場合に最適ですが、状態がいつ変更されたかを知り、サーバーに返送して保存する必要がある場合はどうでしょうか。

これらのシナリオでは、単純に onChange 私たちの財産 react-values コンポーネント（すべてがこれをサポートします）であり、適切と思われる状態の変化を処理できます。

<StringValue onChange={v => console.log(v)}>
  {({ value, set }) => (
    <input type="text" onChange={e => set(e.target.value)} />
  )}
</StringValue>

この例では、新しい値をコンソールにログアウトしていますが、ニーズを満たすために、AJAX呼び出しまたはその他のロジックに簡単に置き換えることができます。

状態値を複数回使用する

先ほど、コード内のさまざまな場所で状態値を複数回使用する必要がある場合があることを説明しました。 これらのシナリオでは、通常、 ReactReduxのようなより重いウェイトステートメント管理ライブラリがミックスに導入されます。

使用したことがある場合 react-redux 時々それが多すぎること、そしてそれがあなたが避けたいかもしれない複雑さの新しい層を導入する可能性があることをあなたは知っています。 その場合は、次を使用できます react-values 状態を同期させたいときに再利用できるコンポーネントを作成するための接続された値：

import { createBooleanValue } from "react-values";

const ConnectedBooleanValue = createBooleanValue();

// ...

この新しい ConnectedBooleanValue のインスタンスであるかのように使用および再利用できます BooleanValue、アプリ内のどこでもこの状態を共有できます。

に似ています onChange ハンドラー、すべての値型 react-values 同等のものがあります create 方法。

結論

この投稿を見つけていただければ幸いです react-value 有益であり、将来のコーディングの冒険には、状態管理の定型ロジックが大幅に少なくなります。

この記事の例を実際にご覧になりたい場合は、CodeSandboxで確認できます。

楽しみ！ 💥

モバイルバージョンを終了