typesafe-actions

typesafe-actions

• Typesafe utilities designed to reduce types verbosity and complexity in Redux Architecture.
• Redux 아키텍처에서 유형의 장황함과 복잡성을 줄이기 위해 설계된 Typesafe 유틸리티입니다.

사용 예

// ReviewContentContainer.tsx
const params = {
  Page: currentPage,
  PageSize: perPage,
  OrderBy: 1
};
dispatch(getMyAccountEvaluateListAsync.request(params));

// actions.ts
export const GET_MYACCOUNT_EVALUATE_LIST_STATUS = 'myAccount/GET_MYACCOUNT_EVALUATE_LIST_STATUS';
export const GET_MYACCOUNT_EVALUATE_LIST_STATUS_SUCCESS = 'myAccount/GET_MYACCOUNT_EVALUATE_LIST_STATUS_SUCCESS';
export const GET_MYACCOUNT_EVALUATE_LIST_STATUS_ERROR = 'myAccount/GET_MYACCOUNT_EVALUATE_LIST_STATUS_ERROR';
export const getMyAccountEvaluateListAsync = createAsyncAction(
  GET_MYACCOUNT_EVALUATE_LIST_STATUS,
  GET_MYACCOUNT_EVALUATE_LIST_STATUS_SUCCESS,
  GET_MYACCOUNT_EVALUATE_LIST_STATUS_ERROR
)<Qs_list, Result_EvaluateList, AxiosError>();

// node_modules/typesafe-actions/dist/create-async-action.d.ts
export declare function createAsyncAction<TType1 extends TypeConstant, TType2 extends TypeConstant, TType3 extends TypeConstant, TType4 extends TypeConstant>(requestType: TType1, successType: TType2, failureType: TType3, cancelType?: TType4): AsyncActionBuilder<TType1, TType2, TType3, TType4>;

export declare type AsyncActionCreator<TRequest extends [T1, P1], TSuccess extends [T2, P2], TFailure extends [T3, P3], TCancel extends [T4, P4] = never, T1 extends TypeConstant = TRequest[0], P1 = TRequest[1], T2 extends TypeConstant = TSuccess[0], P2 = TSuccess[1], T3 extends TypeConstant = TFailure[0], P3 = TFailure[1], T4 extends TypeConstant = TCancel[0], P4 = TCancel[1]> = {
    request: ActionBuilderConstructor<T1, P1>;
    success: ActionBuilderConstructor<T2, P2>;
    failure: ActionBuilderConstructor<T3, P3>;
    cancel: TCancel extends [TypeConstant, any] ? ActionBuilderConstructor<T4, P4> : never;
};

// saga.ts
function* getMyAccountEvaluateListSaga(action: ReturnType<typeof getMyAccountEvaluateListAsync.request>) {
  try {
    const collectionList: Result_EvaluateList = yield call(getMyAccountEvaluateList, action.payload);
    yield put(getMyAccountEvaluateListAsync.success(collectionList));
  } catch (e) {
    if (e.response !== undefined && e.response.data !== '') {
      yield put(getMyAccountEvaluateListAsync.failure(e.response.data));
      return;
    }
    yield put(getMyAccountEvaluateListAsync.failure(e.response));
  }
}

• 액션을 만들 때 createAsyncAction() 의 parameter로 REQEUST, SUCCESS, ERROR, CANCEL(optional) 을 전달하고 createAsyncAction()의 함수를 저장한 변수를 이용해서 dispatch에서 함수.request를 전달한다.

• saga에서도 성공 케이스에 대한 put(== dispatch)을 날릴 때 함수.success()를 이용한다.

Features

Easily create completely typesafe Actions or even Async Actions
No boilerplate and completely typesafe Reducers
Game-changing Helper Types for Redux

• 리덕스에서 타입스크립트를 사용할 때 편하게 사용할 수 있는 것 같다.
• 단순히 redux와 saga를 이용하는 것과 동일한데 타입만 편하게 사용할 수 있게 하는 것 같다.

다른 사람 활용 예

• 내가 진행중인 사이드프로젝트에선 saga에서 type을 거의 신경쓰지 않고 있었다.
  • data를 any로 처리하고 있었기 때문이다.
• typesafe-actions를 사용하면 creatAsyncAction()으로 액션함수를 만들때 제네릭으로 각각의 타입을 같이 한번에 정의하기 때문에 편할 것 같았다.

참고 문헌

• typesafe-actions github
• typesafe-actions 활용하기