[typescript] Redux 상태 관리에서의 타입스크립트와 모듈화 방법

14 Dec 2023

typescript

Redux는 React 애플리케이션에서 상태를 효율적으로 관리하기 위한 도구이다. 이번 포스트에서는 Redux 상태 관리를 위해 타입스크립트 및 모듈화된 방법을 설명한다.

타입스크립트를 사용한 Redux

Redux를 사용하면 상태 및 액션을 관리할 수 있다. 하지만, Redux에서 TypeScript를 사용하면 코드의 안정성을 높일 수 있다. 타입을 사용하면 실수를 사전에 방지할 수 있으며, 코드의 가독성을 향상시킬 수 있다.

액션과 액션 생성자

액션과 액션 생성자는 Redux에서 중요한 개념이다. 이러한 개념을 TypeScript로 작성하면 다음과 같다.

// 액션의 타입 정의
type ActionType = 'INCREMENT' | 'DECREMENT';

// 액션 생성자
function increment(): { type: 'INCREMENT' } {
  return { type: 'INCREMENT' };
}

function decrement(): { type: 'DECREMENT' } {
  return { type: 'DECREMENT' };
}

위 코드에서 ActionType은 액션의 종류를 정의하고, increment와 decrement는 각각 증가와 감소 액션을 생성하는 함수를 나타낸다.

리듀서

리듀서는 상태를 변경하는 함수이다. 타입스크립트를 이용해 리듀서를 작성하면 다음과 같이 작성할 수 있다.

type State = {
  count: number;
};

type Action = { type: 'INCREMENT' } | { type: 'DECREMENT' };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

스토어

Redux 스토어는 애플리케이션의 상태를 보유하고, 상태를 변경하는 액션을 처리한다. 타입스크립트로 스토어를 사용하면 다음과 같이 할 수 있다.

import { createStore } from 'redux';

const initialState: State = { count: 0 };

const store = createStore(reducer, initialState);

모듈화

Redux 앱이 커지면 액션, 리듀서 및 스토어가 커질 수 있다. 이런 경우 모듈화를 통해 코드를 구조화할 수 있다.

액션과 액션 생성자 모듈화

액션과 액션 생성자를 모듈화하면 코드를 더 깔끔하게 관리할 수 있다.

// actions.ts
export type ActionType = 'INCREMENT' | 'DECREMENT';

export function increment(): { type: 'INCREMENT' } {
  return { type: 'INCREMENT' };
}

export function decrement(): { type: 'DECREMENT' } {
  return { type: 'DECREMENT' };
}

리듀서 모듈화

리듀서도 모듈화하여 코드를 더 깔끔하게 관리할 수 있다.

// reducer.ts
import { ActionType } from './actions';

type State = {
  count: number;
};

type Action = { type: ActionType };

export function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

스토어 모듈화

스토어도 모듈화하여 관리할 수 있다.

// store.ts
import { createStore } from 'redux';
import { reducer } from './reducer';

const initialState: State = { count: 0 };

export const store = createStore(reducer, initialState);

Redux 상태 관리에서 타입스크립트 및 모듈화를 사용하면 코드의 안정성을 높이고 유지 보수를 용이하게 할 수 있다.

참고 문헌

Redux 공식 문서: https://redux.js.org/
TypeScript 공식 문서: https://www.typescriptlang.org/

이상으로 Redux 상태 관리에서의 타입스크립트와 모듈화 방법에 대한 포스트를 마치겠습니다. 감사합니다.