React状態管理にImmerを使用します

Reactアプリケーションは、アプリケーションデータを追跡するためにステータスに依存しています。ステータスは、ユーザーインタラクションとともに変化します。状態が変更されたら、通常、ReactのsetStateメソッドを使用して実装されるユーザーインターフェイスによって表示される状態を更新する必要があります。

Reactの状態は不変であるため（直接変更できません）、状態が複雑になると、状態を更新することは非常に扱いにくく、理解して維持するのが困難になります。

これは、Immerが登場する場所です。この記事では、Immerを使用してReact状態管理を簡素化する方法について説明します。 Immerは、「ドラフト」（ドラフト）の概念を使用します。これは、国家自体ではなく、州のコピーとして理解できます。 Immerは、州でコピー操作を実行し、元の状態に影響を与えることなく安全な場所で変更することを想像できます。すべての更新はドラフトで行われ、ドラフトの変更されたパーツのみが実際の状態に更新されます。

たとえば、アプリケーションステータスは次のとおりです。

 this.state = {
  名前：「Kunle」、
  年齢：30、
  都市：「ラゴス」、
  国：「ナイジェリア」
}

ユーザーが31歳の誕生日を祝う場合、 ageの価値を更新する必要があります。 Immerを使用して、状態コピー（ドラフト）が作成されます。

このコピーがメッセンジャーに引き渡されると想像してください。現在、2つのレプリカがあります。現在の状態とKunleに渡されたドラフトレプリカです。 Kunleはドラフトのageを31に変更しました。Messengerは修正されたドラフトをアプリに返し、アプリは2つのバージョンを比較し、これが変更されたドラフトの唯一の部分であるため、 ageのみを更新します。

現在の状態が直接変更されないため、この方法は不変の状態の原則を破ることはありません。 Immerは、不変の状態の管理を簡素化します。

実用的な例：信号機

Immerを使用して簡単な信号機のアプリケーションを構築しましょう。

Immerを使用すると、コンポーネントコードは次のとおりです。

 const {produce} = Immer;

クラスアプリはReact.comPonentを拡張します{
  state = {
    赤：「赤」、 
    黄色：「黒」、 
    緑：「黒」、
    次：「黄色」
  };

  componentDidMount（）{
    this.interval = setinterval（（）=> this.changehandle（）、3000）;
  }

  componentwillunmount（）{
    ClearInterval（this.interval）;
  }

  Handleredlight =（）=> {
    this.setState（
      プロデュース（draft => {{
        draft.red = 'red';
        draft.yellow = 'black';
        draft.green = 'black';
        draft.next = 'Yellow';
      }）
    ）;
  };

  handleyellowlight =（）=> {
    this.setState（
      プロデュース（draft => {{
        draft.red = 'black';
        draft.yellow = 'Yellow';
        draft.green = 'black';
        draft.next = 'green';
      }）
    ）;
  };

  handlegreenlight =（）=> {
    this.setState（
      プロデュース（draft => {{
        draft.red = 'black';
        draft.yellow = 'black';
        draft.green = 'green';
        draft.next = 'red';
      }）
    ）;
  };

  changehandle =（）=> {
    if（this.state.next === 'Yellow'）{
      this.handleyellowlight（）;
    } else if（this.state.next === 'green'）{
      this.handlegreenlight（）;
    } それ以外 {
      this.handleredlight（）;
    }
  };

  与える（） {
    戻る （
      <div classname="box">
        <div classname="circle" style="{{backgroundColor:" this.state.red></div>
        <div classname="circle" style="{{backgroundColor:" this.state.yellow></div>
        <div classname="circle" style="{{backgroundColor:" this.state.green></div>
      </div>
    ）;
  }
}

produce 、Immerによって提供されるデフォルト関数です。これをパラメーターとしてsetStateメソッドに渡します。 produce関数は、 draftを引数として受け入れる関数を受信します。この関数内では、 draftコピーを変更できます。

書く簡単な方法：

 const handLeLight =（state）=> {
  Return Produce（state、（draft）=> {
    draft.red = 'black';
    draft.yellow = 'black';
    draft.green = 'green';
    draft.next = 'red';
  }）;
};

//コンポーネントでの使用：
handlegreenlight =（）=> {
  const nextState = handLeLight（this.state）;
  this.setState（NextState）;
};

produce関数の引数としてdraftを受け入れる現在の状態と関数を渡します。

別の例：買い物リスト

しばらくReactを使用している場合は、スプレッドオペレーターに精通している必要があります。 Immerを使用して、特にArray Stateを扱う場合は、拡張オペレーターを使用する必要はありません。

これをさらに説明するために、買い物リストアプリを作成しましょう。

コンポーネントコード：

クラスアプリはReact.comPonentを拡張します{
  // ...（コンストラクターとその他の方法）...

  handleSubmit =（e）=> {
    E.PreventDefault（）;
    const newItem = {
      ID：uuid.v4（）、
      名前：this.state.name、
      価格：this.state.price
    };
    this.setState（
      プロデュース（draft => {{
        drawt.list = draft.list.concat（newItem）;
      }）
    ）;
  };

  // ...（レンダリング方法）...
}

新製品を追加するときは、リストステータスを更新する必要があります。 setStateおよび拡張機能を使用します。

 handleSubmit =（e）=> {
  // ...
  this.setState（{list：[... this.state.list、newItem]}）;
};

複数の状態を更新する必要がある場合、拡張オペレーターを使用することは非常に複雑になる可能性があります。 Immerを使用すると、これは非常に簡単になります。

状態が更新された後にコールバック関数を呼び出したい場合はどうなりますか？たとえば、リスト内のアイテムの合計価格を計算する必要があります。

 handleSubmit =（e）=> {
  // ...
  this.setState（
    プロデュース（draft => {{
      drawt.list = draft.list.concat（newItem）;
    }）、（）=> {
      this.calculateamount（this.state.list）;
    }
  ）;
};

calculateamount =（list）=> {
  合計= 0とします。
  list.foreach（item => total = item.price）;
  this.setState（
    プロデュース（draft => {{
      draft.totalamount =合計;
    }）
  ）;
};

ステータスが更新され、更新されたステータスが使用された後にコールバック関数が呼び出されます。

インマーフック

use-immer Reactアプリケーションで状態を管理できるフックです。簡単なカウンターの例で実証しましょう。

 「React」からのImport React;
「use-immer」から{useimmer}をインポートします。

const counter =（）=> {
  const [count、updatecounter] = useimmer（{value：0}）;

  function increment（）{
    updatecounter（draft => {
      draft.value;
    }）;
  }

  戻る （
    <div>
      <h1 id="カウンター-count-Value">カウンター{count.Value}</h1>
      <button onclick="{increment}">インクリメント</button>
    </div>
  ）;
};

デフォルトカウンターをエクスポートします。

useImmer useStateに似ています。ステータスと更新関数を返します。コンポーネントがロードされると、ステータス値はuseImmerに渡された値と同じです。返された更新関数を使用すると、カウンター値を増やすためのincrement関数を作成できます。

Immerは、 useReducer ： useImmerReducerに似たフックも提供します。

要約します

次のプロジェクトでImmerの使用を開始するか、現在のプロジェクトに徐々に適用できます。 Reactの状態管理を簡素化します。コードの例はGitHubで見つけることができます。 （githubリンクが存在する場合は提供してください）

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