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

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

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

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

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

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

状態全体の置き換えが必要な状況があります。たとえば、次のとおりです。

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

• 別のデータセットを読み込むときに状態を完全に置き換えます。

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

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

it('マージせずにストアを設定できます', () => { const { setState, getState } = create( (_set) => ({ 答え: 1、 })、 ） // マージする代わりに状態をオーバーライドする必要があります。 setState({ b: 2 }, true) Expect(getState()).toEqual({ b: 2 }) })

it('can set the store without merging', () => {
  const { setState, getState } = create(
    (_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( (_set) => ({ 答え: 1、 })、 ）

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

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

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

• setState

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

• getState

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

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

setState({ b: 2 }, true)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結論

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

私たちについて：

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

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

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

コードベース アーキテクチャに基づいた高度なコースでチームのスキルを向上させます。詳細については、

[email protected] までお問い合わせください。

参考文献:

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