TypeScript Redux에서 createAction 만들어보기

TypeScript로 Redux를 사용해보고 있다. velopert님 블로그 포스팅을 보고 하는 중인데 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);

그러면 type에 as const를 붙이지 않아도 되고 매번 객체를 반한화는 함수를 만들어주지 않아도 된다. 그리고 한줄로 간단하게 적힌다..!

하지만 매번 typeof를 제네릭에 적어줘야 한다는 것이 불편한 것 같다. 최대한 줄여보려 했지만 아직은 여기까지가 한계인가 보다. 더 공부해봐야겠다.