Zusstand를 버전 3에서 4로 마이그레이션하는 방법

소개

Zusstand는 단순성이 뛰어난 React용 멋진 상태 관리 라이브러리입니다. 상점에 액세스하기 위해 앱의 어디에서나 호출할 수 있는 하나의 후크입니다.

이 단순함은 상용구가 거의 필요하지 않고 멋진 미들웨어와 함께 제공되기 때문에 개인용 중소형 앱에 완벽한 선택이 되었습니다!

제쳐두고 미들웨어는 다음과 같습니다.

와 같은:

로컬 저장소에 지속됨

상태 변경을 더 쉽게 처리할 수 있는 Immer

스토어 버전 및 마이그레이션 처리

이 라이브러리를 사용하여 mine의 개인 앱에서 지속 데이터를 처리했습니다. 기본적으로 게임을 플레이하면서 만나는 포켓몬을 관리하는 CRUD 앱입니다.

그러나 중요한 부분은 내 라이브러리를 최신 상태로 유지하는 데 집착한다는 것입니다(특히 이러한 작은 개인 앱에서). 그래서 계속해서 Zusstand를 버전 3에서 4로 마이그레이션하기로 결정했습니다.

약간의 면책 조항으로 이 문서에서는 Zusstand에 대한 기본 수준의 경험이 있다고 가정합니다.

마이그레이션 프로세스

가장 먼저 변경 로그와 Zustand GitHub repo changelog에서 수행해야 할 특정 변경 사항을 확인할 수 있습니다.

먼저 라이브러리를 업데이트해 보겠습니다.

yarn add zustand

제 경우에는 4.1.1로 업데이트되었습니다.



이전의 모든 API는 이전 버전과 호환되므로 Typescript에 적용하려는 변경 사항을 염두에 두십시오.

Immer은 불변 상태 데이터를 보다 편리한 방식으로 작업할 수 있게 해주는 라이브러리입니다. 다음과 같은 유형과 이를 사용할 함수를 명시적으로 설정하기 전에:

const immer =
  <T extends State>(config: StateCreator<T>): StateCreator<T> =>
  (set, get, api) =>
    config(
      (partial, replace) => {
        const nextState =
          typeof partial === 'function' ? produce(partial as (state: T) => T) : (partial as T);
        return set(nextState, replace);
      },
      get,
      api
    );

그러나 이제 Zusstand의 미들웨어에서 직접 가져올 수 있으므로 위의 코드를 삭제할 수 있습니다.

import { immer } from 'zustand/middleware/immer';

다음으로 스토어를 생성하는 섹션에 약간의 변경이 필요합니다.

const useStore = create<AppState>(

에게

const useStore = create<AppState>()(

이제 카레 함수로 처리됩니다.

마지막으로 Zusstand가 제공하는 PersisOptions에서 마이그레이션 옵션을 사용하여 모든 데이터를 로컬 스토리지에 유지했습니다. 그러나 이 앱의 상태는 이제 Typescript에서 알 수 없는 것으로 간주됩니다.

assert 함수로 유형을 명시적으로 선언하여 이 문제를 해결할 수 있습니다. 간결함을 위해 다음과 같이했습니다.

migrate: (persistedState, version) => { assertAppState(persistedState);

assert 함수는 다음과 같습니다.

function assertAppState(val: unknown): asserts val is AppState {
  if (typeof val !== 'object') {
    throw new TypeError('Invalid app state');
  }
}

이것은 나중에 마이그레이션 함수에서 내 상태 객체를 호출할 때마다 알 수 없는 것이 아니라 올바른 유형을 갖게 된다는 것을 의미합니다.

마무리

Zusstand는 사용하기 쉬운 멋진 라이브러리입니다. 작업 중인 모든 프로젝트에서 사용하는 것이 좋습니다. 마이그레이션 프로세스에 대한 다른 질문이나 이야기가 있으면 아래 의견에 남겨주세요!

연결하자

이 내용이 마음에 드셨다면 언제든지 저에게 연락하거나

내newsletter에서 내 무료 개발자 로드맵과 주간 기술 산업 뉴스를 확인하십시오.