React 애플리케이션에서 Redux를 사용한 TypeScript

React 애플리케이션에서 TypeScript를 Redux와 통합하면 유형 안전성이 강화되고 코드 유지 관리성이 향상됩니다. 이 가이드에서는 Redux로 TypeScript를 설정하는 방법, 유형 정의 및 React 구성 요소와의 통합을 안내합니다.

1단계: 종속성 설치

먼저 Redux, React-Redux, TypeScript 유형에 필요한 패키지를 설치합니다.

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

2단계: Redux Store 설정

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-Redux의 Provider 컴포넌트로 메인 React 컴포넌트를 감싸서 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 애플리케이션에서 Redux와 함께 TypeScript를 사용하면 강력한 타이핑을 제공하고 코드 신뢰성을 향상시킵니다. 이러한 단계를 따르면 Redux 스토어를 TypeScript로 설정하고, 액션과 리듀서를 정의하고, Redux를 React 구성 요소와 통합할 수 있습니다.