Why is my redux-observable epic not being triggered?

Question

trying to understand rxjs and rxjs within redux and redux observables by trying to do a simple fetch example

got my store set up like so:

import { applyMiddleware, createStore } from 'redux'
import { reducers } from 'redux/reducers'
import { createEpicMiddleware } from 'redux-observable'
import rootEpic from '../epics'

const epicMiddleware = createEpicMiddleware()
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__

epicMiddleware.run(rootEpic)

export const store = createStore(reducers, composeEnhancers(applyMiddleware(epicMiddleware)))

and in my epic I've got

const getUserDataEpic = (action$, state$) =>
    action$.pipe(
        ofType('GET_USER_DATA'),
        mergeMap(async (action) => {
            const url = `my-url-is-here`
            const data = await fetch(url).then((res) => res.json())
            return Object.assign({}, action, { type: 'GET_DATA_SUCCESS', data })
        }),
        catchError((err) => Promise.resolve({ type: 'FETCH_ERROR', message: err.message })),
    )

const epic2 = (action$, state$) => {}

export default combineEpics(getUserDataEpic)

I also have my action creator:

export const fetchData = () => ({ type: 'GET_USER_DATA' })

this gets fired in my component on mount. I've wrapped in mapDispatchToProps and I've verified it's definitely getting called. as is my reducer

I don't understand why my epic is not being triggered tho?? I was hoping it would see the GET_USER_DATA being fired and then fire it's own action to put the resolved API request into my state.

please advise where im going wrong

Answer 1

ok I figured it out

export const store = createStore(reducers, composeEnhancers(applyMiddleware(epicMiddleware)))

epicMiddleware.run(rootEpic)

I had to call these the other way around ^ :facepalm: