이 기사에서는 병합 없이 상태를 재정의하는 흥미로운 기능에 중점을 두고 Zustand가 setState 함수를 사용하여 상태 교체를 가능하게 하는 방법을 살펴보겠습니다. 간단한 테스트케이스를 통해 사용법을 설명드리겠습니다.

상태 병합과 상태 재정의 이해

코드를 보기 전에 병합과 재정의 상태

• 상태 병합: 기본적으로 Zustand(또는 React)에서 상태를 업데이트하면 새 상태가 기존 상태와 병합됩니다. 업데이트된 필드만 변경되고 나머지 상태는 그대로 유지됩니다.

• 상태 재정의: 대조적으로, 상태를 재정의하면 전체 상태가 새 개체로 대체되어 이전 상태에 있었지만 일부가 아닌 모든 필드가 삭제됩니다. 새로운 상태.

상태를 재정의하는 경우

전체 상태를 교체해야 하는 상황이 있습니다. 예를 들면 다음과 같습니다.

• 양식 제출 후 상태를 재설정하는 중입니다.

• 다른 데이터세트를 로드할 때 상태를 완전히 교체합니다.

Zustand 상태 재정의를 위한 테스트 사례

다음은 setState 함수를 사용하여 상태를 재정의하는 방법을 보여주는 Zustand 코드베이스의 간단한 테스트 사례입니다.

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) => ({
      a: 1,
    }),
  )

초기 상태는 단일 속성이 1로 설정된 객체입니다. create 함수는 두 가지 필수 메서드를 반환합니다.

• setState: 이 메소드는 상점의 상태를 업데이트하는 데 사용됩니다.

• getState: 이 메소드는 상점의 현재 상태를 검색합니다.

2. 상태 재정의 여기서 핵심 작업은 현재 상태 { a: 1 }를 완전히 새로운 상태:
로 바꾸는 것입니다.

setState({ b: 2 }, true)

• true 플래그를 두 번째 인수로 전달함으로써 Zustand는 새 개체 { b: 2 }를 기존 개체와 병합하는 대신 상태를 재정의해야 한다는 것을 알고 있습니다. 이는 이전 상태를 완전히 대체하므로 { a: 1 }이 제거되고 새 상태는 { b: 2 }가 됩니다.

3. 상태 교체 검증 마지막으로 테스트에서는 상태가 완전히 교체되었는지 확인합니다.

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

setState({ b: 2 }, true)를 호출한 후 상점 상태에는 { b: 2 }만 포함되고 더 이상 { a: 1 }이 포함되지 않을 것으로 예상됩니다.

Zustand가 상태를 재정의하는 방법

아래 이미지는 상태를 설정하는 Zustand 소스 코드에서 가져온 것입니다.

보시다시피 교체 플래그가 존재하면 nextState가 새로운 상태가 됩니다.

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

이것은 영리한 방법입니다. 기본적으로 교체가 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