zustand와 타입스크립트 [공식문서번역]

원문 : https://github.com/pmndrs/zustand/blob/main/docs/typescript.md#independent-slices-pattern

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

해당 라이브러리의 공식문서에서도 타입스크립트 관점에서 꽤나 배울 점이 많아 정리해둠.

zustand

 

공식문서 메인 핵심 발췌

링크 : https://github.com/pmndrs/zustand

왜 redux 대신  zustand를 사용하나요?

• 간단하고 unopinionated함
• 훅을 상태 소비의 주요한 수단으로 사용함
• 컨텍스트 프로바이더가 필요 없음
• 렌더링 없이 값 변화를 컴포넌트에 알릴 수 있음

왜 context 대신  zustand를 사용하나요?

• 적은 상용구
• 값이 바뀔 때만 렌더링함. (기본 deepEqual)
• 중앙화된 액션 베이스 상태 관리

zustand redux처럼 쓰기

개인적으로 나쁘지 않음

const types = { increase: 'INCREASE', decrease: 'DECREASE' }

const reducer = (state, { type, by = 1 }) => {
  switch (type) {
    case types.increase:
      return { grumpiness: state.grumpiness + by }
    case types.decrease:
      return { grumpiness: state.grumpiness - by }
  }
}

const useStore = create((set) => ({
  grumpiness: 0,
  dispatch: (args) => set((state) => reducer(state, args)),
}))

const dispatch = useStore((state) => state.dispatch)
dispatch({ type: types.increase, by: 2 })

// 또는 redux-middleware를 사용하십시오. 
// 메인 리듀서를 연결하고 초기 상태를 설정하며 
// 상태 자체와 기본 API에 디스패치 기능을 추가합니다. 
// https://codesandbox.io/s/amazing-kepler-swxol
import { redux } from 'zustand/middleware'

const useStore = create(redux(reducer, initialState))

---

zustand context처럼 쓰기

이것도 나쁘지 않음.

• 컨텍스트 별로 새로 스토어를 만들어야 하는 경우 유용함

import create from 'zustand'
import createContext from 'zustand/context'

const { Provider, useStore } = createContext()

export default function App({ initialBears }) {
  return (
    <Provider
      createStore={() =>
        create((set) => ({
          bears: initialBears,
          increase: () => set((state) => ({ bears: state.bears + 1 })),
        }))
      }>
      <Button />
    </Provider>
  )
}

---

아래 예제는 별 의미는 없어보임

import create from "zustand";
import createContext from "zustand/context";

// Best practice: You can move the below createContext() and createStore to a separate file(store.js) and import the Provider, useStore here/wherever you need.

const { Provider, useStore } = createContext();

const createStore = () =>
  create((set) => ({
    bears: 0,
    increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
    removeAllBears: () => set({ bears: 0 })
  }));

const Button = () => {
  return (
      {/** store() - This will create a store for each time using the Button component instead of using one store for all components **/}
    <Provider createStore={createStore}>
      <ButtonChild />
    </Provider>
  );
};

const ButtonChild = () => {
  const state = useStore();
  return (
    <div>
      {state.bears}
      <button
        onClick={() => {
          state.increasePopulation();
        }}
      >
        +
      </button>
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <Button />
      <Button />
    </div>
  );
}

---

타입스크립트 가이드

TypeScript를 사용할 때의 차이점은 create(...)를 작성하는 대신 create<T>()(...)를 작성해야 합니다.
여기서 T는 상태 타입입니다.

import create from 'zustand'

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

---

초기 상태에서 타입을 추론할 순 없나요?

TLDR: 제네릭 상태타입 T는 invariant 합니다.

함수의 파라미터 함수의 리턴 타입과 함수의 리턴타입이 같은 경우 타입스크립트는 타입을 잘못 추론합니다.

아래 create의 단순화한 버전을 봅시다.

declare const create: <T>(f: (get: () => T) => T) => T

const x = create((get) => ({
  foo: 0,
  bar: () => get(),
}))
// `x` is inferred as `unknown` instead of
// interface X {
//   foo: number,
//   bar: () => X
// }

---

f의 타입 (get: () => T) => T에서

• T를 리턴하면서 T를 제공하지만,
• T는 get 함수의 리턴 타입을 통해서도 옵니다.
• TypeScript는 T를 unknown으로 추론하고 포기합니다.
  
  • 리턴 타입의 T는 get()을 통해서만 알 수 있는데,
  • get()의 타입은 T로 추론됩니다.
  • 즉 고차 타입 추론을 허용하지 않습니다.

아래 예시도 x가 unknown이 됩니다.

즉, x는 string 대신 unknown입니다.

declare const createFoo: <T>(f: (t: T) => T) => T
const x = createFoo((_) => 'hello')

 

 

이제 누군가는 createFoo에 대한 구현을 작성하는 것이 불가능하다고 주장할 수 있고, 이는 사실입니다.

Zusstand는 타입 불건전함을 허용함으로써 이 문제를 우회합니다.

import create from 'zustand/vanilla'
// get은 ({foo:number}) 리턴
const useStore = create<{ foo: number }>()((_, get) => ({
  foo: get().foo,
}))

---

이 코드는 컴파일되지만, 실행하면 어떻게 될까요?

"Uncaught TypeError:Cannot read properties of undefined (reading 'foo')" 예외를 만나게 됩니다.
사실 초기 상태가 생성되기 전에 get은 undefined를 반환하기 때문입니다.

(따라서 초기 상태를 생성할 때 get을 호출하지 마세요!)

get의 최종 타입은 () => { foo: number }이 돠겠지만,

처음에는 () => undefined입니다.

 

---

커링은 왜쓰나요?

TLDR: 해당 이슈를 참고하세요. 모든 타입을 입력하지 않기 위해서입니다 :  microsoft/TypeScript#10571.
아래의 시나리오를 봅시다.

declare const withError: <T, E>(
  p: Promise<T>
) => Promise<[error: undefined, value: T] | [error: E, value: undefined]>
declare const doSomething: () => Promise<string>

const main = async () => {
  let [error, value] = await withError(doSomething())
}

---

 

여기서 T는 문자열로 추론되고 E는 unknown으로 추론됩니다.

이제 어떤 이유로 인해 doSomething()이 어떤 형태의 오류를 던질지 확실하기 때문에

E에 Foo로 타입 주석을 달고 싶습니다.

 

하지만 지금은 모든 제네릭을 전달하거나 전혀 전달하지 않거나 두 가지만 가능합니다.

따라서 E를 Foo로 주석 처리하는 것과 함께 T에도 주석을 달아야 합니다.

 

이를 회피하기 위해 런타임에 아무 것도하지 않는 withError의 커리 버전을 만드는 것입니다.

목적은 E에 주석을 달도록하는 것입니다.

declare const withError: {
  <E>(): <T>(
    p: Promise<T>
  ) => Promise<[error: undefined, value: T] | [error: E, value: undefined]>
  <T, E>(p: Promise<T>): Promise<
    [error: undefined, value: T] | [error: E, value: undefined]
  >
}
declare const doSomething: () => Promise<string>
interface Foo {
  bar: string
}

// withError와 주석
const main = async () => {
  let [error, value] = await withError<Foo>()(doSomething())
}

---

 

이제 T가 추론되고 E에도 주석을 달 수 있습니다.

Zustand는 상태(첫 번째 타입 매개변수)에 타입 주석을 달고자 하는 것과 동일한 사용 사례를 가지고 있으며,

나머지 타입 매개변수는 유추되도록 허용합니다.

 

또는 타입을 입력하는 대신 상태를 유추하는 combine을 사용할 수도 있습니다...

import create from "zustand"
import { combine } from "zustand/middleware"

const useStore = create(combine({ bears: 0 }, (set) => ({
  increase: (by: number) => set((state) => ({ bears: state.bears + by })),
}))

combine 사용 시 조심하세요...

우리는 당신이 매개변수로 받는 타입으로 set, get, store의 타입을 약간 속임으로써 추론을 달성합니다.

첫번째 거짓말은 상태가 완성된 타입인 것처럼 입력된다는 것입니다.

완성된 타입은 실제로 첫 번째 매개변수와 두 번째 매개변수의 리턴 모두의 얕은 병합({ ...a, ...b })입니다.

 

두 번째 매개변수 get의 추론된 type은 () => { bears: number }이지만,

실제로는 () => { bears: number, increase: (by: number) => void }이어야 하므로 거짓말입니다.

 

그래도 useStore는 여전히 올바른 타입을 가지고 있습니다.

예를 들어 useStore.getState는 () => { bears: number, increase: (by: number) => void }가 됩니다.

 

{ bears: number }는 { bears: number, increase: (by: number) => void }의 상위 타입이기 때문에 거짓말이 아닙니다.

따라서 대부분의 경우 문제가 없을 것입니다.

 

하지만 replace를 사용하는 동안은 주의해야 합니다.

예를 들어 set({ bears: 0 }, true)는 컴파일되지만 increase 함수를 삭제하므로 건전하지 않습니다.

set 함수가 아니라 밖에서 설정하면, 즉 useStore.setState({ bears: 0 }, true) 이렇게 하면,

저장소가 increase가 누락되었음을 알기 때문에 컴파일되지 않습니다.

 

Object.keys를 수행하면 Object.keys(get())는 ["bears"]가 아니라 ["bears", "increase"]를 반환합니다.

(즉, get의 반환 타입은 완벽하지 않음).

 

따라서 상태에 대한 타입을 작성할 필요가 없다는 편의를 위해 약간의 타입 안전성을 절충해 combine을 하십시오.

 

또한 Combine은 상태를 "생성"하기 때문에 Combine을 사용할 때 커리 버전을 사용하지 않습니다.

상태를 생성하는 미들웨어를 사용할 때 이제 상태를 유추할 수 있으므로 커리 버전을 사용할 필요가 없습니다.

 

상태를 생성하는 또 다른 미들웨어는 redux입니다.

따라서 Combine, redux 또는 상태를 생성하는 기타 사용자 정의 미들웨어를 사용할 땐

커리 버전을 사용하지 않는 것이 좋습니다.

---

미들웨어 사용하기

미들웨어에서 TypeScript를 사용하기 위해 특별한 작업을 수행할 필요는 없습니다.
추론을 위해 내부에서 타입이 사용되도록 하세요

import create from 'zustand'
import { devtools, persist } from 'zustand/middleware'

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useStore = create<BearState>()(
  devtools(
    persist((set) => ({
      bears: 0,
      increase: (by) => set((state) => ({ bears: state.bears + by })),
    }))
  )
)

밖에서 사용하면 타입 입력이 어려울 수 있습니다.

import create from 'zustand'
import { devtools, persist } from 'zustand/middleware'

const myMiddlewares = (f) => devtools(persist(f))

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useStore = create<BearState>()(
  myMiddlewares((set) => ({
    bears: 0,
    increase: (by) => set((state) => ({ bears: state.bears + by })),
  }))
)

---

미들웨어 관리 및 고급 사용 방법

이 가상의 미들웨어를 작성해야 한다고 상상해보세요...

import create from 'zustand'

const foo = (f, bar) => (set, get, store) => {
  store.foo = bar
  return f(set, get, store)
}

const useStore = create(foo(() => ({ bears: 0 }), 'hello'))
console.log(useStore.foo.toUpperCase())

 

Zustand Middleware가 스토어를 변경하고 있습니다.

타입 수준에서 변이를 어떻게 인코딩할 수 있습니까?

즉, 이 코드가 컴파일되도록 foo를 입력하는 방법은 무엇입니까?

 

일반적인 정적으로 타입이 지정된 언어의 경우 이것이 불가능하지만

TypeScript 덕분에 Zusstand에는 이를 가능하게 하는 "고급 돌연변이자"라는 것이 있습니다.

미들웨어를 입력하거나 StateCreator 타입을 사용하는 것과 같은 복잡한 타입 문제를 처리하는 경우

구현 세부 사항을 이해해야 합니다. (#710)

이 문제에 대한 답이 무엇인지 알고 싶다면 여기(here)를 참조하십시오.

---

미들웨어 레시피

스토어 타입을 변경하지 않는 미들웨어

import create, { State, StateCreator, StoreMutatorIdentifier } from 'zustand'

type Logger = <
  T extends State,
  Mps extends [StoreMutatorIdentifier, unknown][] = [],
  Mcs extends [StoreMutatorIdentifier, unknown][] = []
>(
  f: StateCreator<T, Mps, Mcs>,
  name?: string
) => StateCreator<T, Mps, Mcs>

type LoggerImpl = <T extends State>(
  f: PopArgument<StateCreator<T, [], []>>,
  name?: string
) => PopArgument<StateCreator<T, [], []>>

const loggerImpl: LoggerImpl = (f, name) => (set, get, store) => {
  type T = ReturnType<typeof f>
  const loggedSet: typeof set = (...a) => {
    set(...a)
    console.log(...(name ? [`${name}:`] : []), get())
  }
  store.setState = loggedSet

  return f(loggedSet, get, store)
}

export const logger = loggerImpl as unknown as Logger

type PopArgument<T extends (...a: never[]) => unknown> = T extends (
  ...a: [...infer A, infer _]
) => infer R
  ? (...a: A) => R
  : never

// ---

const useStore = create<BearState>()(
  logger(
    (set) => ({
      bears: 0,
      increase: (by) => set((state) => ({ bears: state.bears + by })),
    }),
    'bear-store'
  )
)

---

스토어 타입을 변경하는 미들웨어

import create, {
  State,
  StateCreator,
  StoreMutatorIdentifier,
  Mutate,
  StoreApi,
} from 'zustand'

type Foo = <
  T extends State,
  A,
  Mps extends [StoreMutatorIdentifier, unknown][] = [],
  Mcs extends [StoreMutatorIdentifier, unknown][] = []
>(
  f: StateCreator<T, [...Mps, ['foo', A]], Mcs>,
  bar: A
) => StateCreator<T, Mps, [['foo', A], ...Mcs]>

declare module 'zustand' {
  interface StoreMutators<S, A> {
    foo: Write<Cast<S, object>, { foo: A }>
  }
}

type FooImpl = <T extends State, A>(
  f: PopArgument<StateCreator<T, [], []>>,
  bar: A
) => PopArgument<StateCreator<T, [], []>>

const fooImpl: FooImpl = (f, bar) => (set, get, _store) => {
  type T = ReturnType<typeof f>
  type A = typeof bar

  const store = _store as Mutate<StoreApi<T>, [['foo', A]]>
  store.foo = bar
  return f(set, get, _store)
}

export const foo = fooImpl as unknown as Foo

type PopArgument<T extends (...a: never[]) => unknown> = T extends (
  ...a: [...infer A, infer _]
) => infer R
  ? (...a: A) => R
  : never

type Write<T extends object, U extends object> = Omit<T, keyof U> & U

type Cast<T, U> = T extends U ? T : U

// ---

const useStore = create(foo(() => ({ bears: 0 }), 'hello'))
console.log(useStore.foo.toUpperCase())​

---

커리 없이 create 사용하기

create를 사용하는 데 권장되는 방법은 저장소 타입을 유추할 수 있도록 하기 때문에

create<T>()(...)와 같은 커리가 적용된 해결 방법을 사용하는 것입니다.

그러나 어떤 이유로 해결 방법을 사용하지 않으려면 다음과 같은 타입 매개변수를 전달할 수 있습니다.

어떤 경우에는 주석 대신 어설션으로 작동하므로 권장하지 않습니다.

import create from "zustand"

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useStore = create<
  BearState,
  [
    ['zustand/persist', BearState],
    ['zustand/devtools', never]
  ]
>(devtools(persist((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
})))​

---

독립 슬라이스 패턴

상태가 서로의 데이터를 참조하지 않음

import create, { StateCreator } from 'zustand'

interface BearSlice {
  bears: number
  addBear: () => void
}
const createBearSlice: StateCreator<BearSlice, [], []> = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
})

interface FishSlice {
  fishes: number
  addFish: () => void
}
const createFishSlice: StateCreator<FishSlice, [], []> = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
})

const useStore = create<BearSlice & FishSlice>()((...a) => ({
  ...createBearSlice(...a),
  ...createFishSlice(...a),
}))

StateCreator<MySlice, [], []>를 StateCreator<MySlice, Mutators, []>로 바꿉니다.

예를 들어 devtools를 사용하는 경우 StateCreator<MySlice, [["zustand/devtools", never]], []>가 됩니다.

또한 StateCreator<MySlice, [], []> 대신 StateCreator<MySlice>를 작성할 수도 있습니다.

두 번째 및 세 번째 매개변수는 기본값으로 []를 갖기 때문입니다.

---

의존 슬라이스 패턴

상태가 서로의 데이터를 참조

import create, { StateCreator } from 'zustand'

interface BearSlice {
  bears: number
  addBear: () => void
  eatFish: () => void
}
const createBearSlice: StateCreator<
  BearSlice & FishSlice,
  [],
  [],
  BearSlice
> = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
})

interface FishSlice {
  fishes: number
  addFish: () => void
}
const createFishSlice: StateCreator<
  BearSlice & FishSlice,
  [],
  [],
  FishSlice
> = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
})

const useStore = create<BearSlice & FishSlice>()((...a) => ({
  ...createBearSlice(...a),
  ...createFishSlice(...a),
}))​

 

StateCreator<MyState, [], [], MySlice>를

StateCreator<MyState, Mutators, [], MySlice>로 바꿉니다.

예를 들어 devtools를 사용하는 경우 StateCreator<MyState, [["zustand/devtools", Never]], [], MySlice>가 됩니다.