What is the right way to register EPIC in Angular 8 app module,

[myquery]

Am new to redux, and my first encounter landed me in using epic, but i have one problem connectng epic with my store in my app module, am using angular.
The Action Creators

this is action creator defined inside a class

  ` static LIST_ALL_COMPETITIONS = 'LIST_ALL_COMPETITIONS';
     listAllCompetition(payload : ICompetition[]) : AnyAction {
       return this.ngRedux.dispatch(
         { type: SessionActions.LIST_ALL_COMPETITIONS, 
       payload});
 };`

i would want this action dispatched if a user hit my url in the browser, kind of fetching the data from the server, so i would probably call this in my ngOnit or use a resolver in the route path.

The Reducer Function

My reducer function will take an initial state that comprises of the different endpoint that will prefetch which of course has the same structure with the remote data which i enforced by creating each interface for each endpoint.

  ` export const initialState:IAppState = {
     competitions: [],
     matches:[],
     teams : [],
     standing: [],
     players:[]
   }
 export function FootballReducer(state: IAppState = initialState, action){
     switch(action.type){
        case ActionTypes.ListCompetitionSuccess:
            return{
                ...state, 
                competitions: action.payload
           }     
     }
    return state;
}`

if am able to setup epic correctly, it suppose the intercept the actions coming in from the component, do the network call and return an action containing the payload of the fetched result

 `constructor(private http: HttpClient, private service : FootballStoreService, private action : 
    SessionActions ) { }
     listAllCompetitions  = (action$) : AnyAction => {
       return action$.pipe(
         ofType(SessionActions.LIST_ALL_COMPETITIONS),
            mergeMap(() => {
               return this.service.listAllCompetition()
                 .map(result => {
                 return this.action.listAllCompetition(result)
      })
      .catch(error => Observable.of({
        type: SessionActions.ERROR_LIST
      }));
    }))
 }`

the function that makes the api call

`listAllCompetition(){
 return this.http.get<ICompetition[]>(BASE_URL+'competitions/', {headers: this.headers})
}`

the issue now is configuring epic to create a store at my app module. another thing am unsure of is whether an setting up epic correctly interm of my reducer and action, i need explanations on this.

the app module congif

`export class AppModule {
   constructor(private ngRedux : NgRedux<IAppState>, private epic : EpicServiceService){
     const epicActiion = createEpicMiddleware(this.epic.listAllCompetitions(this is where the 
  problem is, bringing in my epic funtions here))
     // const middleWare = [createEpicMiddleware(SessionActions.LIST_ALL_COMPETITIONS)];
      ngRedux.configureStore(
      FootballReducer, 
     initialState
     )
     }
 }`

my problem is that the createmiddleWare functions needs a action type and i don't know how to feed it that argument.

Setting up the store including epic middleware shouldn't be made too complicated, redux on its own is already confusing, if somebody is able to learn what an actions is, and where the reducer functions comes in, bringing in epic as a tool that will aid side effects should be made easy to integrate. so pls with the latest release of RxJS library, point me to a link that can detail how to work with redux and observable using epic as it relate to my reducers and actions. but better still somebody here can guide with code snippets on the best practice.

Originally posted by @myquery in #78 (comment)