Zustand Storeの型付けパターン
InterfaceとActionで型付きZustand Storeを定義します。
「Zustand Storeの型付けパターン」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
Zustandを型付けする理由
Zustandは最小限の状態管理ライブラリです。TypeScriptを適切に統合すると、ボイラープレートなしでストアの読み取り、アクション、セレクターを型安全に扱えます。
import { create } from "zustand";基本的な型付きストア
ストアのインターフェースを定義し、createにジェネリックとして渡します。
interface CounterStore {
count: number;
increment: () => void;
decrement: () => void;
}
const useCounter = create<CounterStore>((set) => ({
count: 0,
increment: () => set((s) => ({ count: s.count + 1 })),
decrement: () => set((s) => ({ count: s.count - 1 })),
}));ストアの状態を読み取る
セレクターとともにフックを使い、状態の特定の部分を読み取ります。TypeScriptはセレクターから戻り値の型を推論します。
function Counter() {
const count = useCounter((s) => s.count); // number
const increment = useCounter((s) => s.increment); // () => void
return <button onClick={increment}>{count}</button>;
}状態とアクションの分離
インターフェース内で状態のプロパティとアクションメソッドを分けると、より見通しよく整理できます。
interface State { count: number; }
interface Actions { increment: () => void; reset: () => void; }
type CounterStore = State & Actions;Zustandでの非同期アクション
Zustandは非同期アクションを標準でサポートしています。クリエーター内でアクション関数をasyncにするだけで使用できます。
interface UserStore {
users: User[];
fetchUsers: () => Promise<void>;
}
const useUserStore = create<UserStore>((set) => ({
users: [],
fetchUsers: async () => {
const data = await api.getUsers();
set({ users: data });
},
}));immerミドルウェアの型付け
ミュータブルな形式で更新するには、Zustandのimmerミドルウェアを使用します。ストアの型も正しく引き継がれます。
import { immer } from "zustand/middleware/immer";
const useStore = create<CounterStore>()(
immer((set) => ({
count: 0,
increment: () => set((state) => { state.count++; }),
}))
);devtoolsミドルウェア
適切な型付けとdevtoolsを組み合わせることで、型を維持したままRedux DevToolsをサポートできます。
import { devtools } from "zustand/middleware";
const useStore = create<CounterStore>()(
devtools(
(set) => ({ count: 0, increment: () => set({ count: 1 }) }),
{ name: "CounterStore" }
)
);永続化ストアの型付け
persistミドルウェアは状態をlocalStorageにシリアライズします。partial stateインターフェースを使って正しく型付けします。
import { persist } from "zustand/middleware";
const useStore = create<CounterStore>()(
persist(
(set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
{ name: "counter-storage" }
)
);型付きスライスパターン
大規模なストアでは、型付きのスライスに分割し、1回のcreate呼び出しで結合します。
type UserSlice = { users: User[]; setUsers: (u: User[]) => void; };
type UiSlice = { modal: boolean; openModal: () => void; };
type AppStore = UserSlice & UiSlice;React外部で購読する
型付きストアAPIを使うと、Reactコンポーネントの外部からストアの状態にアクセスし、変更を購読できます。
// Access current state outside React
const count = useCounter.getState().count;
// Subscribe to changes
useCounter.subscribe((state) => console.log(state.count));まとめ：Zustandの型付け
Zustandの型付けでは、ストアのインターフェースを定義してcreateに渡し、セレクターで型付きの状態読み取りを行います。また、カリー化パターンを通じてミドルウェア（immer、devtools、persist）を重ね、型が正しく流れるようにします。
確認問題
関係のない変更による再レンダリングを発生させず、コンポーネントでZustandの状態の特定の部分を読み取るにはどうすればよいですか。
学習内容
Zustandのストアは、インターフェースのジェネリックをcreateに渡すことで型付けできます。セレクター関数を使うと、効率的かつ型安全に状態を読み取れます。immer、devtools、persistなどのミドルウェアは、Zustandのカリー化パターンを通じて組み合わせることで、TypeScriptの型推論を正しく保てます。
よくある質問
「Zustand Storeの型付けパターン」レッスンは無料ですか？
はい。「Zustand Storeの型付けパターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「Zustand Storeの型付けパターン」で何を学びますか？
InterfaceとActionで型付きZustand Storeを定義します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Zustand Storeの型付けパターン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Redux ToolkitのSliceとThunkに型を付ける
- Zustand Storeの型付けパターン
- XState：型付きステートマシン
- 型付きDerived StateとSelector