【TypeScript】redux-observable로 ofType의 형태를 완전하게 추론시킨다

redux-observable의 공식으로 제공되고 있는 형태 정의라고 ofType 의 추론을 할 수 없기 때문에, redux-observable 의 형태 정의를 확장해 ofType를 추론시키는 방법에 대해 씁니다.

ofType이 추론되면 인수와 ofType 후의 Action이 무엇인지 확정하고 payload가 보완되게 되므로 편리합니다.

샘플 프로젝트

샘플 프로젝트를 준비했으므로 기본 이것의 모방하면 할 수 있습니다.
akameco/redux-observable-example
원한다면 스타주세요.

How

그럼, 해설해 갑니다.

프로젝트에서 하나의 Action

redux-observable ofType 에서 추론하기 위해서는 먼저 프로젝트에서 공통의 Action 형을 정의할 필요가 있습니다. Action 형식을 정의하는 방법에는 여러 가지가 있지만 이 프로젝트에서는 as const 및 redux-actions-type을 사용하여 Action 형식을 정의합니다.

자세한 내용은 【redux】as const로 action creator로부터 Action의 형태를 간단하게 만든다 - Qiita을 읽으십시오.

src/actionType.ts

import { ActionType } from "redux-actions-type";
import * as actions from "./actions";

export type Action = ActionType<typeof actions>;

redux-observable 형식 정의 확장

Action 의 형태를 이용해, redux-observable 의 형태 정의를 확장합니다. Action 형이 하나이므로, Extract 를 사용해 ofType 인수로부터 반환값의 형태가 추론되게 됩니다.

src/@types/redux-observable.d.ts

import { Action } from "../actionType";
import { Observable } from "rxjs";

declare module "redux-observable" {
  function ofType<ActionType extends Action["type"]>(
    ...key: ActionType[]
  ): (
    source: Observable<Action>
  ) => Observable<Extract<Action, { type: ActionType }>>;
}

Epic 형의 정의

마지막으로 Epic 형식을 정의합시다. 이것을 이용하는 것으로 ofType 의 추론이 효과가 됩니다. 그리고는 프로젝트에 맞추어 필요하다면 State나 Dependencies를 설정하면 보다 보완이 편리해질 것입니다.

src/typeRoot.ts

import { Epic as _Epic } from "redux-observable";
import { Action } from "./actionType";

export type Epic = _Epic<Action, Action>;

Enjoy!

이제 ofType 입력시의 보완과 ofType 이후의 Action이 추론되게 되었습니다.
나머지는 보완이 되는 환경에서 Epic 를 쓸 뿐입니다. Enjoy!

import { of } from "rxjs";
import { delay, mergeMap } from "rxjs/operators";
import { combineEpics, ofType } from "redux-observable";
import { Epic } from "../../typeRoot";
import { increment } from "./actions";

const incrementAsync: Epic = action$ =>
  action$.pipe(
    ofType("incrementAsync"),
    mergeMap(action => of(increment()).pipe(delay(action.delay)))
  );

akameco/redux-observable-example

redux-observable의 ofType을 완전히 추론하는 예 htps // t. 코/응 w4ゔぉqy9w 피 c. 라고 r. 이 m/H36 오 f T1 악을 하지 않고, 요구하는 곳은 적고. 숲에서 코끼리처럼 .js (@akameco) April 22, 2019