Zustand の状態をオーバーライドする方法。

この記事では、マージせずに状態をオーバーライドするという興味深い機能に焦点を当てながら、Zustand が setState 関数を使用して状態の置換をどのように可能にするかを検討します。簡単なテストケースを用いて使い方を説明します。

状態のマージと状態のオーバーライドについて理解

コードを見る前に、マージ 状態と オーバーライド 状態の違いを理解することが重要です。

• 状態のマージ: デフォルトでは、Zustand (または React) で状態を更新すると、新しい状態が既存の状態とマージされます。更新されたフィールドのみが変更され、残りの状態はそのまま残ります。

• 状態のオーバーライド: 対照的に、状態をオーバーライドすると、状態全体が新しいオブジェクトに置き換えられ、以前の状態に存在していたものの一部ではないフィールドはすべて破棄されます。新しい状態。

状態をオーバーライドする場合

次のような状況によっては、状態全体を置き換える必要がある場合があります。

• フォーム送信後に状態をリセットします。

• 別のデータセットをロードするときに状態を完全に置き換えます。

Zustand 状態をオーバーライドするためのテスト ケース

これは、setState 関数を使用して状態をオーバーライドする方法を示す、Zustand のコードベースからの簡単なテスト ケースです。

it('can set the store without merging', () => {
  const { setState, getState } = create<{ a: number } | { b: number }>(
    (_set) => ({
      a: 1,
    }),
  )

  // Should override the state instead of merging.
  setState({ b: 2 }, true)
  expect(getState()).toEqual({ b: 2 })
})

テストの詳細

1.ストアの作成 まず、Zustand ストアが初期状態で作成されます。

const { setState, getState } = create<{ a: number } | { b: number }>(
    (_set) => ({
      a: 1,
    }),
  )

初期状態は、1 に設定された 1 つのプロパティを持つオブジェクトです。create 関数は 2 つの重要なメソッドを返します。

• setState: このメソッドはストアの状態を更新するために使用されます。

• getState: このメソッドはストアの現在の状態を取得します。

2.状態のオーバーライド ここでの重要な操作は、現在の状態 { a: 1 } を完全に新しい状態に置き換えることです:

setState({ b: 2 }, true)

• 2 番目の引数として true フラグを渡すことにより、Zustand は、新しいオブジェクト { b: 2 } を既存のオブジェクトとマージするのではなく、状態をオーバーライドする必要があることを認識します。これにより前の状態が完全に置き換えられるため、{ a: 1 } が削除され、新しい状態は { b: 2 } になります。

3.状態の置換の検証 最後に、テストによって状態が完全に置換されたことを確認します。

expect(getState()).toEqual({ b: 2 })

setState({ b: 2 }, true) を呼び出した後、ストアの状態には { b: 2 } のみが含まれ、{ a: 1 } は含まれないことが期待されます。

Zustand が状態をオーバーライドする方法

以下の画像は、状態を設定する Zustand のソース コードです。

ご覧のとおり、replace フラグが存在する場合、nextState が新しい状態になります。

(replace ?? (typeof nextState !== 'object' || nextState === null))

これは賢い方法で、replace が false (デフォルト) の場合、(typeof nextState !== ‘object’ || nextState === null)) 条件がチェックされます。

結論

Zustand は React で状態を管理する簡単な方法を提供し、オーバーライド フラグを指定した setState を使用して状態を完全にオーバーライドできる機能により、さらなる柔軟性が提供されます。フォームをリセットするか、新しいデータをロードするか、古い値を消去するかにかかわらず、この機能を使用すると、アプリケーション内で状態がどのように管理および更新されるかを完全に制御できます。

私たちについて:

Think Throo では、オープンソース プロジェクトで使用される高度なコードベース アーキテクチャの概念を教えることを使命としています。

Next.js/React の高度なアーキテクチャ概念を実践してコーディング スキルを 10 倍にし、ベスト プラクティスを学び、実稼働レベルのプロジェクトを構築します。

私たちはオープンソースです — https://github.com/thinkthroo/thinkthroo (スターを付けてください!)

コードベース アーキテクチャに基づいた高度なコースでチームのスキルを向上させます。詳細については、hello@thinkthroo.com までお問い合わせください。

参考文献:

1. https://github.com/pmndrs/zustand/blob/v4.5.5/tests/basic.test.tsx#L471C13-L471C50

2. https://github.com/pmndrs/zustand/tree/v4.5.5?tab=readme-ov-file#overwriting-state

以上がZustand の状態をオーバーライドする方法。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。