Wsrtjtyk

I am trying to set up epics which I have done multiple times before but this time seems not to be working. With just three files related to epics, an index.ts, a root-epic.ts and an epic file containing two epics, the code shown below (specifically the line epic.run(rootEpic);) produces this error:

Argument of type '(action$: ActionsObservable, store: Store, { api, endPointKeys }: IEpicDependency) => Observable' is not assignable to parameter of type 'Epic, Action, void, IEpicDependency>'.
Types of parameters 'store' and 'state$' are incompatible.
Type 'StateObservable' is not assignable to type 'Store'.
Property 'dispatch' is missing in type 'StateObservable'

Any idea how this can be resolved?

root-epic:

import { combineEpics } from 'redux-observable';

import { fetchRefDataCountriesEpic, fetchRefDataRegionsEpic } from './epics/fetch-ref-data-epic';

export const rootEpic = combineEpics(fetchRefDataCountriesEpic,  fetchRefDataRegionsEpic);

index.ts:

import 'rxjs';

import { createStore, applyMiddleware, compose} from 'redux';

import { createEpicMiddleware } from 'redux-observable';

import { routerMiddleware } from 'connected-react-router';

import { logger } from 'redux-logger';

import { api, endPointKeys } from '../services';

import { IEpicDependency } from '../models';

import { rootReducer} from './root-reducer';

import { rootEpic } from './root-epic';

import { appHistory } from '../app-history';

const dependenciesObject: IEpicDependency = { api, endPointKeys };

const epic = createEpicMiddleware({dependencies:dependenciesObject});

const middlewareList = [epic, logger, routerMiddleware(appHistory())];

const windowlfDefined = typeof window === 'undefined' ? null: window as any;

const composeEnhancers = windowlfDefined.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__   || compose;

const middlewares = composeEnhancers( applyMiddleware(... middlewareList));

const store = createStore(rootReducer(appHistory()), middlewares);

epic.run(rootEpic);

export { store };

fetch-ref-data-epic.ts:

import { ActionsObservable, ofType } from 'redux-observable';

import { Observable, of } from 'rxjs';

import { mergeMap, map, catchError } from 'rxjs/operators';

import { Store } from 'redux';

import { IAppAction } from '../app-action';

import { IAppState } from '../state';

import { IAppError, IEpicDependency } from'../../models/misc';

import { referenceDataStateActions, fetchRefDataCountriesSuccess, fetchRefDataCountriesError, fetchRefDataRegionsError, fetchRefDataRegionsSuccess } from '../actions';

import { ICountry, IRegion } from '../../models/reference';



export const fetchRefDataCountriesEpic = (action$: 

ActionsObservable<IAppAction>, store: Store<IAppState>, { api, endPointKeys 

}: IEpicDependency): 

Observable<IAppAction> => action$.pipe(

ofType(referenceDataStateActions.FETCH_REF_DATA_COUNTRIES),

mergeMap(() => {

    return api.get(endPointKeys.url, 'sitecountry').pipe(

        map((res:any) => res.data.data),

        map((countries: Array<ICountry>) => fetchRefDataCountriesSuccess(countries)),

          catchError(error => {

        const appError: IAppError = { error, message:'Failed to retrieve countries' };

return of(fetchRefDataCountriesError(appError))

   })   )})  );



export const fetchRefDataRegionsEpic = (action$: 

ActionsObservable<IAppAction>, store: Store<IAppState>, { api, endPointKeys 

}: IEpicDependency): 

Observable<IAppAction> => action$.pipe(

ofType(referenceDataStateActions.FETCH_REF_DATA_REGIONS),

mergeMap(() => {

    return api.get(endPointKeys.url, 'siteregion').pipe(

        map((res:any) => res.data.data),

        map((regions: Array<IRegion>) => fetchRefDataRegionsSuccess(regions)),

        catchError(error => {

        const appError: IAppError = { error, message:'Failed to retrieve regions' };

return of(fetchRefDataRegionsError(appError))

        })    )})    );  

other code:

import { Observable } from 'rxjs';

export interface IServiceApi {

get(apiKey: string, url: string, data?: any): Observable<any>;

post(apiKey: string, url: string, data?: any): Observable<any>;

put(apiKey: string, url: string, data?: any): Observable<any>;

export interface IEndPointKeys { url: string;}

export interface IEpicDependency { api: IServiceApi, endPointKeys: IEndPointKeys}

Versions:

rxjs 6.3.3

redux-observable 1.0.0

typescript 3.1.6

redux 4.0.0

react 16.6.0

react-dom 16.6.0

react-redux 5.0.7

react-router 4.3.1

react-router-dom 4.3.1

@types/react 16.4.18

@types/react-dom 16.0.9

@types/react-redux 6.0.9