React アプリケーションでの TypeScript と Redux

React アプリケーションで TypeScript と Redux を統合すると、型の安全性が強化され、コードの保守性が向上します。このガイドでは、型の定義や React コンポーネントとの統合など、TypeScript と Redux のセットアップについて説明します。

ステップ1: 依存関係をインストールする

まず、Redux、React-Redux、TypeScript タイプに必要なパッケージをインストールします。

npm install redux react-redux @reduxjs/toolkit
npm install @types/react-redux --save-dev

ステップ2: Reduxストアを設定する

TypeScript を使用して Redux ストアを作成します。状態とアクションの型を定義し、ストアを構成します。

import { configureStore } from '@reduxjs/toolkit';
import { rootReducer } from './reducers';

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

const store = configureStore({
  reducer: rootReducer,
});

export default store;

ステップ3: アクションとリデューサーを定義する

アクション タイプ、アクション クリエーター、およびリデューサーを作成します。TypeScript を使用して、厳密な型指定のための状態とアクション タイプを定義します。

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

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

ステップ4: ReduxをReactコンポーネントに接続する

React-Redux の useSelector フックと useDispatch フックを使用して、React コンポーネント内の Redux 状態とディスパッチ アクションを接続します。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from './store';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const count = useSelector((state: RootState) => state.counter.value);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(10))}>Increment by 10</button>
    </div>
  );
};

export default Counter;

ステップ5: Redux StoreをReactと統合する

メインの React コンポーネントを React-Redux の Provider コンポーネントでラップして、Redux ストアをアプリケーションに渡します。

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

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

結論

React アプリケーションで TypeScript を Redux と併用すると、強力な型指定が可能になり、コードの信頼性が向上します。これらの手順に従うことで、TypeScript を使用して Redux ストアを設定し、アクションとリデューサーを定義し、Redux を React コンポーネントと統合できます。