Zustand

// Zustand (部分的に再レンダー)
const count = useStore((state) => state.count); // countが変わったときだけ再レンダー

// Redux
<Provider store={reduxStore}>
  <App />
</Provider>

// Zustand (不要)
<App />

/stores
  /user
    index.ts         ← store作成（create）
    types.ts         ← 型定義
    initialState.ts  ← 初期状態
    actions.ts       ← set関数で状態更新

import type { StateCreator } from 'zustand'
import { createJSONStorage, devtools, persist } from 'zustand/middleware'

type MiddlewareOptions = {
  devtoolsName?: string
  persistName?: string
  persistStorage?: Storage
}

/**
 * devtoolsとpersistをラップするミドルウェア
 * @param storeInitializer
 * @param options
 * @returns
 */
export const withMiddleware = <T>(
  storeInitializer: StateCreator<T>,
  options?: MiddlewareOptions
): StateCreator<T, [], [['zustand/devtools', never], ['zustand/persist', T]]> => {
  return devtools(
    persist(storeInitializer, {
      name: options?.persistName ?? 'storage',
      storage: createJSONStorage(() => options?.persistStorage ?? localStorage),
    }),
    {
      name: options?.devtoolsName ?? 'store',
    }
  )
}
```


<br>

### partialize
一部の状態だけを保存

```ts
persist(
  (set, get) => ({
    count: 0,
    user: { name: 'John', loggedIn: false },
    tempValue: 123,
  }),
  {
    name: 'my-storage',
    partialize: (state) => ({
      count: state.count,
      user: state.user,
    }),
  }
)
```

<br>

### Immer
Immer：Immerライブラリを統合して、不変性を簡単に保ちながら状態を更新できるような拡張
Immerは、ミュータブル（直接代入）な書き方で、イミュータブルな状態更新を実現するライブラリ

ネストが深いとスプレッド演算子だらけで読みづらい。
```ts
set((state) => ({
  form: {
    ...state.form,
    contact: {
      ...state.form.contact,
      email: 'test@example.com'
    }
  }
}));
```

Immerを使用すると以下のような書き方ができる。
```ts
set((state) => {
  state.user.name = 'Alice'; // ← ミュータブル風に書いてOK！
});
```

```ts
import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';

interface State {
  user: {
    name: string;
    age: number;
  };
  updateName: (name: string) => void;
}

export const useStore = create<State>()(
  immer((set) => ({
    user: { name: '', age: 0 },
    updateName: (name) =>
      set((state) => {
        state.user.name = name;
      })
  }))
);
```

状態がフラットな場合は不要。

export const createFishSlice = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
})

export const createBearSlice = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
})

import { create } from 'zustand'
import { createBearSlice } from './bearSlice'
import { createFishSlice } from './fishSlice'

export const useBoundStore = create((...a) => ({
  ...createBearSlice(...a),
  ...createFishSlice(...a),
}))

import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';

interface StoreState {
  count: number;
  name: string;
  increment: () => void;
}

export const useStore = create<StoreState>()(
  subscribeWithSelector((set) => ({
    count: 0,
    name: 'React',
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
);

useEffect(() => {
  const unsub = useStore.subscribe(
    (state) => state.count, // セレクタ：countのみに注目
    (newCount, prevCount) => {
      console.log(`countが ${prevCount} → ${newCount} に変わった`);
    }
  );
  return () => unsub();
}, []);

import { useShallow } from 'zustand/react/shallow';

const { count, user } = useStore(
  useShallow((state) => ({
    count: state.count,
    user: state.user,
  }))
);

const count = useStore((s) => s.count);
const name = useStore((s) => s.name);

const useStore = createSelectors(
  create((set) => ({
    count: 0,
    name: 'React',
    setCount: (n: number) => set({ count: n }),
  }))
);

// ✅ セレクタが自動生成される！
const count = useStore.use.count(); // ← useStore((s) => s.count) と同等
const name = useStore.use.name();

for (const k of Object.keys(store.getState())) {
  (store.use as any)[k] = () => store((s) => s[k as keyof typeof s]);
}