Redux、Zustand、Jotaiの実装の比較

1. Redux Toolkit

Redux Toolkitは、Reduxの公式ツールキットであり、状態管理を簡素化するためのライブラリです。

インストール

npm install @reduxjs/toolkit react-redux

実装の流れ

1. スライスの作成: アプリケーションの状態とその操作を定義します。
2. ストアの作成: スライスをストアに登録します。
3. コンポーネントの作成: 状態を取得・更新するコンポーネントを作成します。

コード例

// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

// スライスの作成
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 }, // 初期状態
  reducers: {
    increment: (state) => {
      state.value += 1; // インクリメント
    },
    decrement: (state) => {
      state.value -= 1; // デクリメント
    },
  },
});

// アクションをエクスポート
export const { increment, decrement } = counterSlice.actions;

// ストアを作成
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer, // スライスをストアに登録
  },
});

export default store;

// App.js
import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import store, { increment, decrement } from './store';

const Counter = () => {
  const count = useSelector((state) => state.counter.value); // 状態を取得
  const dispatch = useDispatch(); // アクションを送信するためのフック
  
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

const App = () => (
  <Provider store={store}> {/* ストアを提供 */}
    <Counter />
  </Provider>
);

export default App;

2. Zustand

Zustandは、軽量でシンプルな状態管理ライブラリで、Reactのコンテキストを利用して状態を管理します。

インストール

npm install zustand

実装の流れ

1. ストアの作成: 状態とその操作を定義します。
2. コンポーネントの作成: 状態を取得・更新するコンポーネントを作成します。

コード例

// useStore.js
import create from 'zustand';

// ストアを作成
const useStore = create((set) => ({
  count: 0, // 初期状態
  increment: () => set((state) => ({ count: state.count + 1 })), // インクリメント
  decrement: () => set((state) => ({ count: state.count - 1 })), // デクリメント
}));

export default useStore;

// App.js
import React from 'react';
import useStore from './useStore';

const Counter = () => {
  const { count, increment, decrement } = useStore(); // 状態とアクションを取得
  
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

const App = () => <Counter />; // コンポーネントをレンダリング

export default App;

3. Jotai

Jotaiは、アトムベースの状態管理ライブラリで、Reactのために設計されています。

インストール

npm install jotai

実装の流れ

1. アトムの作成: 管理する状態を定義します。
2. コンポーネントの作成: アトムを使って状態を取得・更新するコンポーネントを作成します。

コード例

// atoms.js
import { atom } from 'jotai';

// アトムを作成
export const countAtom = atom(0); // 初期状態

// App.js
import React from 'react';
import { useAtom } from 'jotai';
import { countAtom } from './atoms';

const Counter = () => {
  const [count, setCount] = useAtom(countAtom); // アトムから状態を取得
  
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
      <button onClick={() => setCount((c) => c - 1)}>Decrement</button>
    </div>
  );
};

const App = () => <Counter />; // コンポーネントをレンダリング

export default App;