CODEWITHSUNDEEP
typescriptrxjsredux-observable
Juan Bernal
Juan Bernal

Reputation: 107

combineEpics using TypeScript gives type error

I am getting this error when combining my epics:

TS2345: Argument of type 'Epic<SessionAction, GlobalState, any>' is not assignable to parameter of type 'Epic<EmployeeAction, GlobalState, any>'.
Type 'SessionAction' is not assignable to type 'EmployeeAction'.
Types of property 'type' are incompatible.
  Type 'SessionActionTypes' is not assignable to type 'EmployeeActionTypes'.

The following is the code:

import { combineEpics } from 'redux-observable';
import { fetchUserSession } from './sessionEpics';
import { fetchEmployee } from './employeeEpics';

export default combineEpics(
  fetchEmployee,
  fetchUserSession
);

Upvotes: 3

Views: 1860

Answers (3)

squidfunk
squidfunk

Reputation: 431

A better solution might be using the correct types: AnyAction and Observable:

import { AnyAction } from "redux"
import { combineEpics, createEpicMiddleware } from "redux-observable"
import { Observable } from "rxjs"

export const clientMiddleware = createEpicMiddleware(
  combineEpics<AnyAction, Observable<AnyAction>>(
    authenticateEpic(request),
    registerEpic(request)
  ))

Upvotes: 1

Axel186
Axel186

Reputation: 561

Or use combineEpics<any>: 

export default combineEpics<any>(
  fetchEmployee,
  fetchUserSession
);

Upvotes: 4

Roy Art
Roy Art

Reputation: 703

I have pretty much the same problem. It seems like typescript grabs the first epic, infers it's type and expect all the rest to be the same.

What I did was cast the first one.

Using your code as example:

import { Observable } from 'rxjs/Observable';
import { AnyAction } from 'redux';
import { combineEpics } from 'redux-observable';
import { fetchUserSession } from './sessionEpics';
import { fetchEmployee } from './employeeEpics';

export default combineEpics(
  fetchEmployee as Observable<AnyAction>,
  fetchUserSession
);

Upvotes: 3

Related Questions