Redux Toolkit のインストールと設定

Redux Toolkit を使用するには、React バインディングとともにインストールする必要があります。

プロジェクトで次のコマンドを実行します:

npm install @reduxjs/toolkit react-redux

これにより、ストアを作成し React アプリに接続するために必要なすべてがインストールされます。

ストアのセットアップ

ストア用の新しいファイルを作成します。一般的な場所は次のとおりです:

src/store/store.js

このファイル内で、configureStore を使用してストアを作成します:

import { configureStore } from '@reduxjs/toolkit';

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

この時点ではストアは空です。次の章でリデューサーを追加します。

Redux を React に接続

ストアをアプリ全体で利用できるようにするには、ルートコンポーネントを Provider でラップします。

メインエントリーファイル（例: main.jsx または index.js）を開き、次のように更新します:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store/store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

これで Redux ストアがすべてのコンポーネントで利用可能になります。