Redux Toolkit 備忘録

目的

React×TypeScriptでRedux Toolkitを使用した際の備忘録です。

1. プロジェクトの作成

npm create vite

2. Reduxのインストール

npm install @reduxjs/toolkit react-redux

3. Storeの作成

import { configureStore } from "@reduxjs/toolkit";
import { useSelector as rawUseSelector, TypedUseSelectorHook } from 'react-redux';

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

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useSelector: TypedUseSelectorHook<RootState> = rawUseSelector;

4. Sliceの作成

import { createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
    name: "counter",
    initialState: {
        count: 0,
    },
    reducers: {
        increment: (state) => {
            state.count += 1;
        },
        decrement: (state) => {
            state.count -= 1;
        },
    }
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

5. Storeの修正

reducerプロパティに作成したSliceを追加します。

import { configureStore } from "@reduxjs/toolkit";
import { useSelector as rawUseSelector, TypedUseSelectorHook } from 'react-redux';
import counterReducer from "./counterSlice"; // ← 追加

export const store = configureStore({
  reducer: {
    counter: counterReducer, // ← 追加
  }
})

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useSelector: TypedUseSelectorHook<RootState> = rawUseSelector;

6. Providerコンポーネントの設定

全てのコンポーネントからstoreにアクセスできるようにするため、main.tsファイルを修正します。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { Provider } from "react-redux"; // ← 追加
import { store } from "./redux/store"; // ← 追加

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Provider store={store}>  // ← 追加
      <App />
    </Provider>
  </React.StrictMode>,
)

7. useSelectorを使用してstateを取得

import { useSelector } from '../redux/store.ts'

function Counter() {
  const count = useSelector((state) => state.counter.count);

  return (
    <>
        <h2>{count}</h2>
    </>
  )
}

export default Counter

8. useDispatchを使用してstateを更新

import { useDispatch } from 'react-redux';
import { decrement, increment } from "../redux/counterSlice.ts";

function Counter() {
  const dispatch = useDispatch();
  const incre = () => dispatch(increment());
  const decre = () => dispatch(decrement());

  return (
    <>
        <button onClick={incre}>+</button>
        <button onClick={decre}>-</button>
    </>
  )
}

export default Counter

おわりに

Redux Toolkitを使用することで以下のように異なるコンポーネントで状態を共有することが出来ました。