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

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

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

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

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

制御されていないコンポーネントではなく、制御されたコンポーネントを使用したいというシナリオはありますか？ react-valuesコンポーネントをvalueまたはdefaultValueに渡すだけで、準備完了です。

入門

react-valuesで遊んでみる準備はできましたか？

素晴らしい！ npmを介してreact-values依存関係をインストールすることから始めます。

$ 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で確認できます。

楽しみ！ 💥