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

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

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

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

의 차이점을 이해하는 것이 중요합니다.

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

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

상태를 재정의해야 하는 경우

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

• 양식 제출 후 상태 재설정

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

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

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

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로 설정된 객체입니다. create 함수는 두 가지 필수 메서드를 반환합니다.

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

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

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

setState({ b: 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 소스코드입니다.

보시다시피 교체 플래그가 존재하면 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(별표를 주세요!)

코드베이스 아키텍처를 기반으로 한 고급 과정을 통해 팀의 기술을 향상하세요. 자세한 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!