• 목차

기본 사용법

TypeScript를 사용할 때 타입 매개변수를 설정해야 합니다. (create<T>()(…))

import { create } from 'zustand';

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

// 주의! 커링 함수를 사용해야 함.
// 참고: <https://github.com/microsoft/TypeScript/issues/10571>
export const useBearStore = create**<BearState>()(**(set) => ({
	bears: 0,
	increase: (by) => set((store) => ({ bears: store.bears + by })),
})**)**;

combine 미들웨어를 사용할 경우 타입을 입력할 필요없이 상태를 통해 유추할 수 있도록 할 수 있습니다.

import { create } from 'zustand';
**import { combine } from 'zustand/middleware';**

const useBearStore = create(
	**combine(**
		{ bears: 0 }, 
		(set) => ({
			increase: (by: number) => set((store) => ({ bears: store.bears + by })),
		})
	**)**
);

<aside> 📌 combine 미들웨어를 사용하여 스토어를 생성하기 때문에 커링된 버전을 사용하지 않습니다.

</aside>

미들웨어 사용

TypeScript를 사용할 때 미들웨어를 활용하기 위해 특별히 해야할 일은 없습니다.

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

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

const useBearStore = 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 middlewares = (f) => devtools(persist(f));**

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

const useBearStore = create<BearState>()(
	**middlewares(**
		(set) => ({
			bears: 0,
			increase: (by) => set((store) => ({ bears: store.bears + by })),
		})
	**)**
);

참고로 미들웨어 구성 시, devtools 미들웨어가 가장 나중에 위치해야 합니다.