I'm testing out using redux-observable with a side-project and I'm running into this problem repeatedly: Uncaught TypeError: bineEpics: 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 = bineEpics(
  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')
);

I'm testing out using redux-observable with a side-project and I'm running into this problem repeatedly: Uncaught TypeError: bineEpics: 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 = bineEpics(
  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')
);

• javascript
• rxjs
• redux-observable

Share Improve this question Follow asked May 13, 2017 at 23:42 JoseJose 5,24088 gold badges2929 silver badges5050 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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 mon 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?

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