TypeScript Redux에서 createAction 만들어보기

TypeScript + React에 Redux를 적용했다. action 관련 라이브러리인 typesafe-action은 사용하지 않고 프로젝트를 진행 중이다. 매번 액션 생성함수를 만들어주는 것이 반복적인 작업이 많다보니 함수로 만들어야겠다는 생각이 들었다. 그래서 간단한 createAction 함수를 만들어보기로 했다. 아직 타입스크립트가 익숙하지 않아서 완벽하게 만든 것 같지는 않지만 나름 쓸만한 함수이다.

import { Action } from 'redux';

export function createAction<T, P>(type: T): (payload: P) => Action<T> & { payload: P };
export function createAction<T>(type: T): () => Action<T>;
export function createAction<T, P>(type: T) {
  return (payload?: P) => {
    return {
      type,
      payload,
    };
  };
}

payload가 있을 때랑 없을 때를 구분하기 위해 overload 해주었다. 제네릭으로 T와 P를 받아서 type을 T 타입으로 payload를 P 타입으로 주었다. P타입까지 있으면 {type: T, payload: P}를 반환하는 타입이 되고 T타입까지만 있다면 {type: T}인 객체를 반환하는 타입이 된다.

그러면 이제 다음과 같이 사용할 수 있다.

import { createAction } from '../../lib/utils/util';

export const EDIT_LATEX = 'latex/EDIT';
export const ADD_TAB = 'tab/ADD';

export const editLatex = createAction<typeof EDIT_LATEX, string>(EDIT_LATEX);
export const addTab = createAction<typeof ADD_TAB>(ADD_TAB);