Quick simple guide on making Redux-Observable works with TypeScript
by Johnson Lai


Then export out all the actions as AllActions.

`actions/index.ts`
```ts
import { LoginActionCreator } from "./login/LoginActionModel";

export default type AllActions = LoginActionCreator

Epics

In the epics, import following library.

import { Epic } from "redux-observable";
import { isOfType } from "typesafe-actions";
import { filter } from "rxjs/operators";

Then simply use Epic to declare your types.

export const loginUserEpic: Epic<AllActions></AllActions> = (action$) =>
  action$.pipe(
    filter(isOfType((LoginActionTypes.LOGIN_ACTION))),
    switchMap((action: LoginAction) =>
      ajax({
        url,
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: { email: action.payload.username, password: action.payload.password },
      }).pipe(
        map((response: AjaxResponse) => loginSuccess(response.response.token)),
        catchError((error: Error) => of(loginFailed(error))),
      ),
    ),
  );

Where the Epics is from redux-observable library, AllActions are the actions that is input and output of the epics.

The types is as follows:

Epic&lt;InputActions, OutputActions, Store>
Epic&lt;Actions(Input&amp;Output)>

In case you want to use store from redux, you need a RootState (from root reducer)

export const someEpic: Epic&lt;AllActions, AllActions, RootState> = (action$, store$) 
=> action$.pipe(
  filter(isOfType(SOMETYPE)),
  mergeMap(action => {
    const a = store$.value.a;
    return someActions(a, action.payload.b);
  })
javascript
rxjs
redux
teammalaysia
software