Epic not returning stream in Redux-Observable

javascript, redux-observable, rxjs

Solution

Your `handleSearchEpic` epic is an arrow function with a block but does not actually return the stream.

Bad

export const handleSearchEpic = action$ => { // <-- start of block
  // vvvvvvv missing return
  action$.ofType(SEARCH_CONTENT)
    .mergeMap(action => axios.get(`...SOME_API_ENDPOINT`))
    .map(res => returnSearchContent(res))
} // <-- end of block

Good

export const handleSearchEpic = action$ => {
  return action$.ofType(SEARCH_CONTENT)
    .mergeMap(action => axios.get(`...SOME_API_ENDPOINT`))
    .map(res => returnSearchContent(res))
}

Implicit return?

Alternatively, you can remove the block and use an implicit return, which may be what you meant to do?

export const handleSearchEpic = action$ => // <--- no block
  action$.ofType(SEARCH_CONTENT)
    .mergeMap(action => axios.get(`...SOME_API_ENDPOINT`))
    .map(res => returnSearchContent(res));

A very common mistake, which is why I added the error message you provided, but it didn't seem to make the solution understandable. Any suggestions how I can improve the error message?

combineEpics: one of the provided Epics "handleSearchEpic" does not return a stream. Double check you're not missing a return statement!

Problem

I'm testing out using `redux-observable` with a side-project and I'm running into this problem repeatedly: `Uncaught TypeError: combineEpics: one of the provided Epics "handleSearchEpic" does not return a stream. Double check you're not missing a return statement!` I've referenced the redux observable docs and several other examples online but I can't identify what I might be missing. Below are my actions and the epic in question. ``` export const searchContent = query => { return { type: SEARCH_CONTENT, query } } const returnSearchContent = searchResults => { return function(dispatch) { dispatch({ type: RETURN_SEARCH_CONTENT, searchResults }); } } // Epics export const handleSearchEpic = action$ => { action$.ofType(SEARCH_CONTENT) .mergeMap(action => axios.get(`...SOME_API_ENDPOINT`)) .map(res => returnSearchContent(res)) } export const rootEpic = combineEpics( handleSearchEpic ); ``` Here is the root of the application and the store config: ``` const epicMiddleware = createEpicMiddleware(rootEpic); const store = createStore(Reducer, applyMiddleware(epicMiddleware)); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); ```

Original source