[typescript] Redux 액션과 리듀서의 타입 정의 방법

14 Dec 2023

typescript

Redux는 상태 관리 라이브러리로, TypeScript와 함께 사용할 때 타입을 명확하게 정의하여 앱의 안정성을 높일 수 있습니다. 이번 글에서는 Redux 액션 및 리듀서의 타입을 어떻게 정의하는지 살펴보겠습니다.

Redux 액션의 타입 정의

Redux 액션은 type 필드를 가진 일반적인 객체입니다. 액션의 타입을 정의하기 위해 TypeScript에서는 enum 타입을 사용하는 것이 좋습니다.

enum ActionType {
  INCREMENT = 'INCREMENT',
  DECREMENT = 'DECREMENT',
}

type IncrementAction = {
  type: ActionType.INCREMENT;
  payload: number;
};

type DecrementAction = {
  type: ActionType.DECREMENT;
  payload: number;
};

type Action = IncrementAction | DecrementAction;

위의 예제에서 ActionType은 INCREMENT와 DECREMENT 두 가지 액션 타입을 정의하고, IncrementAction과 DecrementAction은 각각 payload 필드를 포함한 액션을 정의합니다. 마지막으로 Action은 둘 중 하나의 액션을 나타내는 유니온 타입으로 정의됩니다.

Redux 리듀서의 타입 정의

Redux 리듀서는 상태와 액션을 받아 새로운 상태를 반환하는 함수입니다. 이때 TypeScript에서는 State와 Action의 타입을 명확히 정의하여 사용하는 것이 좋습니다.

type State = {
  count: number;
};

const initialState: State = {
  count: 0,
};

const reducer = (state: State = initialState, action: Action): State => {
  switch (action.type) {
    case ActionType.INCREMENT:
      return { ...state, count: state.count + action.payload };
    case ActionType.DECREMENT:
      return { ...state, count: state.count - action.payload };
    default:
      return state;
  }
};

위의 예제에서 State는 상태의 타입을 정의하고, initialState은 초기 상태를 나타냅니다. 그리고 reducer 함수는 State와 Action을 입력으로 받고, State를 반환합니다.

이렇게 Redux 액션과 리듀서의 타입을 명확하게 정의함으로써 TypeScript에서 Redux를 안전하게 사용할 수 있습니다.