React Academy · レッスン

最初のZustand Storeを作成する

create()でstoreを定義し、state slicesとactionsを追加して、useStoreで利用します。

レッスン 1/413 ステップ

「最初のZustand Storeを作成する」はCoddyKit上の無料React Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、create()を使用して最初のZustandストアを作成し、状態のスライスとアクションを定義して、Reactコンポーネントでストアを利用します。

Zustandとは

Zustandは、最小限で特定の設計方針を押し付けない状態管理ライブラリです。ストアは、状態と関数を持つ単純なJavaScriptオブジェクトです。コンポーネントはフックを介してストアを購読します。Provider、reducer、定型コードは必要ありません。

インストール

Zustandをインストールします。peer dependencyはありません。

npm install zustand

ストアの作成

初期状態とアクションを返す関数を指定してcreate()を呼び出します。この関数は、状態を更新するための`set`ヘルパーを受け取ります。

import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

コンポーネントでのストアの使用

任意のコンポーネントでストアフックを呼び出すと、状態とアクションにアクセスできます。Providerでラップする必要はありません。

function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

セレクター構文

ストアフックにセレクター関数を渡すと、必要なスライスだけを購読できます。選択した値が変化した場合にのみ、コンポーネントが再レンダリングされます。

const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

setによる状態更新

`set`関数は、新しい値をストアにシャローにマージします。オブジェクト、または現在の状態を受け取って部分的な更新を返す関数を渡せます。

set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

非同期アクション

アクションは非同期にできます。データをawaitした後でsetを呼び出します。ミドルウェアは必要ありません。通常の非同期関数を記述するだけです。

const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

ネストした状態の更新

ネストしたオブジェクトの場合は、外側の階層を手動でスプレッドするか、深い階層の変更にimmerミドルウェアを使用します。デフォルトでは、setはトップレベルのキーだけをマージします。

set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

React外部からのストアの読み取り

getState()を使用するとコンポーネント外部からストアの状態にアクセスでき、subscribe()を使用すると変更を購読できます。テストやReact以外のコードで役立ちます。

const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

確認問題

Zustandストアで、set関数は何を行いますか？

対話的なレッスンで答える

まとめ

create((set) => ({ state, actions }))でZustandストアを作成します。コンポーネントではセレクター構文を使用してスライスを購読します。アクションはset()を呼び出して状態を更新します。非同期処理に対応し、getState()を使えばReact外部でも動作します。

次のレッスン

次のレッスン: **セレクターと不要な再レンダリングの防止** — 必要な状態のスライスだけを取り出し、必要な場合にのみコンポーネントが再レンダリングされるようにします。

無料で開始

AI チューターと学ぶ React — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 88
レッスン: 324

無料で学習を始めるコース全体を表示

よくある質問

「最初のZustand Storeを作成する」レッスンは無料ですか？

はい。「最初のZustand Storeを作成する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「最初のZustand Storeを作成する」で何を学びますか？

create()でstoreを定義し、state slicesとactionsを追加して、useStoreで利用します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「最初のZustand Storeを作成する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る