score:12

Accepted answer

The ofType operator offered by redux-observable is not the best way to discriminate union types. A much better way is to use the isOfType function provided by typesafe-actions.

import { filter } from 'rxjs/operators';
import { isOfType } from 'typesafe-actions';

First, let's tell TypeScript about the possible actions used in your application. Your action stream should not be defined as ActionsObservable<Action>, but as a stream of your actions: ActionsObservable<LoginActions>.

export const loginUserEpic = (action$: ActionsObservable<LoginActions>) =>

Now we can use the isOfType predicate together with the filter operator. Replace this:

ofType<LoginAction>(LoginActionTypes.LOGIN_ACTION)

with this:

filter(isOfType(LoginActionTypes.LOGIN_ACTION))

The action passed down the stream will be correctly recognized as LoginAction.

score:0

Typescript gives an error because you have set to ActionsObservable action generic a redux Action that is an interface with form of { type: string }. So Typescript thinks that all the actions coming will have only type, but you are setting to ofType filtering operator another type of Action, even if it extends redux Action interface Typescript will require bivarianceHack to allow you pass anything that implements that interface. One of the simplest workarounds is to change ActionsObservable<Action> to ActionsObservable<AnyAction>, with AnyAction which is imported from redux.

score:3

You can checkout https://github.com/piotrwitek/react-redux-typescript-guide for the details below for all the standard way of doing when using React, Redux and Redux-Observable.

I would suggest using typesafe-actions library to achieve the types.

Some pseudo codes:

Actions

Instead of this

export interface LoginSuccessAction extends Action {
  type: LoginActionTypes.LOGIN_SUCCESS_ACTION;
  payload: {
    loginToken: string;
  };
}

export function loginSuccess(loginToken: string): LoginSuccessAction {
  return {
    type: LoginActionTypes.LOGIN_SUCCESS_ACTION,
    payload: { loginToken },
  };
}

use typesafe-actions, without interface

actions/login/LoginActions.ts

import { action } from "typesafe-actions"

export function loginSuccess(loginToken: string) {
  return action(LoginActionTypes.LOGIN_SUCCESS_ACTION, { loginToken });
}

actions/login/LoginActionsModel.ts

import * as LoginActions from "./LoginActions";
import { ActionCreator } from "typesafe-actions";

export type LoginActionCreator = ActionCreator<typeof LoginActions>

Then export out All Actions.

actions/index.ts

import { LoginActionCreator } from "./login/LoginActionModel";

export default type AllActions = LoginActionCreator

Epics

import { Epic } from "redux-observable";
import { isOfType } from "typesafe-actions";
import { filter } from "rxjs/operators";
export const loginUserEpic: Epic<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<InputActions, OutputActions, Store>
Epic<Actions(Input&Output)>

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

export const someEpic: Epic<AllActions, AllActions, RootState> = (action$, store$) 
=> action$.pipe(
  filter(isOfType(SOMETYPE)),
  mergeMap(action => {
    const a = store$.value.a;
    return someActions(a, action.payload.b);
  })

Related Query