Zustand vs. Redux Toolkit: Choosing a State Manager for Your React Health App

npx create-react-app health-app --template typescript
cd health-app

npm install zustand

// src/stores/userStore.ts
import { create } from 'zustand';

interface UserProfile {
  name: string;
  age: number;
  email: string;
}

interface UserState {
  profile: UserProfile | null;
  setUserProfile: (profile: UserProfile) => void;
  clearUserProfile: () => void;
}

export const useUserStore = create<UserState>((set) => ({
  profile: null,
  setUserProfile: (profile) => set({ profile }),
  clearUserProfile: () => set({ profile: null }),
}));

npm install @reduxjs/toolkit react-redux

// src/features/user/userSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import type { RootState } from '../../app/store';

interface UserProfile {
  name: string;
  age: number;
  email: string;
}

interface UserState {
  profile: UserProfile | null;
}

const initialState: UserState = {
  profile: null,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUserProfile: (state, action: PayloadAction<UserProfile>) => {
      state.profile = action.payload;
    },
    clearUserProfile: (state) => {
      state.profile = null;
    },
  },
});

export const { setUserProfile, clearUserProfile } = userSlice.actions;

export const selectUserProfile = (state: RootState) => state.user.profile;

export default userSlice.reducer;

// src/app/store.ts
import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/user/userSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// src/features/metrics/metricsSlice.ts
import {
  createSlice,
  createEntityAdapter,
  PayloadAction,
} from '@reduxjs/toolkit';
import type { RootState } from '../../app/store';

export interface HealthMetric {
  id: string; // 例：'heart-rate-2023-12-25T10:00:00Z'
  type: 'heartRate' | 'steps' | 'sleep';
  value: number;
  timestamp: string;
}

const metricsAdapter = createEntityAdapter<HealthMetric>({
  sortComparer: (a, b) => b.timestamp.localeCompare(a.timestamp),
});

const initialState = metricsAdapter.getInitialState({
  status: 'idle',
  error: null as string | null,
});

const metricsSlice = createSlice({
  name: 'metrics',
  initialState,
  reducers: {
    addMetric: metricsAdapter.addOne,
    addMetrics: metricsAdapter.addMany,
    updateMetric: metricsAdapter.updateOne,
  },
});

export const { addMetric, addMetrics, updateMetric } = metricsSlice.actions;

export const {
  selectAll: selectAllMetrics,
  selectById: selectMetricById,
} = metricsAdapter.getSelectors((state: RootState) => state.metrics);

export default metricsSlice.reducer;

// src/stores/rootStore.ts
import { create } from 'zustand';
import { UserState, useUserStore } from './userStore';

export interface HealthMetric {
  id: string;
  type: 'heartRate' | 'steps' | 'sleep';
  value: number;
  timestamp: string;
}

interface MetricsState {
  metrics: Record<string, HealthMetric>;
  addMetric: (metric: HealthMetric) => void;
  // ... 他の指標アクション
}

const createMetricsSlice = (set: any) => ({
  metrics: {},
  addMetric: (metric: HealthMetric) =>
    set((state: { metrics: { metrics: any; }; }) => ({
      metrics: {
        ...state.metrics.metrics,
        [metric.id]: metric,
      },
    })),
});

// Sliceを結合できますが、この例では別々に保ちます
// Zustandがモジュール性をどのように促進するかを示すために
// const useRootStore = create((...a) => ({
//   ...useUserStore(...a),
//   ...createMetricsSlice(...a),
// }));

// シンプルのため、別の指標ストアを作成します
export const useMetricsStore = create<MetricsState>(createMetricsSlice);

// src/stores/userStore.ts
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

// ... (インターフェースは同じ)

export const useUserStore = create(
  persist<UserState>(
    (set) => ({
      profile: null,
      setUserProfile: (profile) => set({ profile }),
      clearUserProfile: () => set({ profile: null }),
    }),
    {
      name: 'user-storage', // 一意の名前
      storage: createJSONStorage(() => localStorage), // (オプション) デフォルト：localStorage
    }
  )
);

npm install redux-persist

// src/app/store.ts
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // デフォルトでWeb用localStorage
import userReducer from '../features/user/userSlice';
import metricsReducer from '../features/metrics/metricsSlice';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['user'], // ユーザースライスのみを永続化
};

const rootReducer = combineReducers({
  user: userReducer,
  metrics: metricsReducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false, // redux-persistでは無効化を推奨
    }),
});

export const persistor = persistStore(store);

// ... (RootStateとAppDispatchタイプ)

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { store, persistor } from './app/store';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);