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 コンポーネントと統合できます。