Injecting services in Redux Epic Angular JS

Question

I am using "redux-observable" for Redux capablities in AngularJS v1.6. Following code is for an Epic

export const getAllBidsAPI : any = (action$: ActionsObservable<any>, store: any, { customerService = CustomerService }) =>
      action$.ofType(GET_ALL_BID)
        .mergeMap((action : any) =>
          Observable.fromPromise(customerService.getCustomers())
            .map((res: any) => ({type : GET_ALL_BID_SUCCESS , payload : res.data.bid}))
        );

Here CustomerService is not recognized. I guess, its not injected.

const rootEpic = combineEpics(
  getAllBidsAPI
);

const rootReducer = combineReducers({
  bidReducer
});

const epicMiddleware = createEpicMiddleware(rootEpic, {
    dependencies : {CustomerService} 
});

export const store = createStore(
    rootReducer,
    applyMiddleware(epicMiddleware)
);

This is where we add CustomerService as dependency in Epic. But, I get error.

Cannot read property 'getCustomers' of undefined

Answer 1

The most common reason for a dependency being undefined in redux-observable is that it is actually provided as undefined; usually because the import/require is incorrect. Double check that you are importing CustomerService correctly, as well as pause your debugger in the file where you pass it to createEpicMiddleware to confirm that it is (or is not) undefined.

The other thing I've seen is they were using an old version of redux-observable that did not yet support the dependency injection. However I'm pretty confident it's the first suggestion above because redux-observable does not provide anything as the third argument to your epic by default. So in your case, if redux-observable was to blame, you would actually get Cannot read property 'customerService' of undefined because the third argument would be nothing, instead it's the object you provided.