React + Redux-Observable + Typescript - Compilation, Argument Not Assignable Error

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.

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);
  })