Sagas not triggering other sagas and actions

Question

I'm having a problem with what seems like a simple and very usual use-case for redux-saga. I'm trying to make a call to the API to fill my redux store with an initial set of data. To do that I'm trying to run a saga at start-up.

The relevant part of my store.js looks like that:

const reduxRouterMiddleware = routerMiddleware(browserHistory)
const sagaMiddleware = createSagaMiddleware()
const middleware = [reduxRouterMiddleware, sagaMiddleware]

const enhancers = compose(
  window.devToolsExtension ? window.devToolsExtension() : f => f,
  applyMiddleware(...middleware)
)

const store = createStore(rootReducer, defaultState, enhancers)

sagaMiddleware.run(rootSaga)

export const history = syncHistoryWithStore(browserHistory, store)
export default store

My sagas.js file looks like that:

export function* fetchListings() {
  try {
    console.log('fetchListings saga - try')
    const response = yield call(api.get, '/api/listings')
    console.log(response.data.listings)
    yield put({type: 'FETCH_LISTINGS_SUCCESS', listings: response.data.listings})
  }
  catch (err) {
    console.log('fetchListings saga - error')
    yield put({type: 'FETCH_LISTINGS_ERROR', error: err})
  }
}

export function* listenFetchListings() {
  yield takeEvery('FETCH_LISTINGS_REQUEST', fetchListings)
  console.log('watcher saga')
}

export default function* rootSaga() {
  yield fork (fetchListings)
}

When the page loads I can see the request to the API being fired and the console log shows expected payload coming back. Unfortunately, the FETCH_LISTINGS_SUCCESS action doesn't get dispatched. When I dispatch it manually from ReduxDevTools it modifies my state beautifully. For testing purposes, I have also added the listenFetchListings saga to try and test it with an explicit call. Unfortunately, when I manually dispatch the FETCH_LISTINGS_REQUEST action, it doesn't seem to get triggered either. After a few hours of testing, reading docs and tutorials I have to admit defeat. Please, help.

Answer 1

Actually, this question has the correct answer put in as a comment: redux-saga cannot catch actions dispatched by store enhancers

The problem was the order of arguments for the compose function. Works perfectly when composed like that:

const enhancers = compose(
  applyMiddleware(...middleware),
  window.devToolsExtension ? window.devToolsExtension() : f => f
)