Redux-Saga takeEvery not calling saga

Question

Okay, so working my way up from the Hello World tutorial at https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html, I'm trying to build a very simple fetch call... only that my generator function never gets executed.

The relevant code looks as follows, for now just console logging for testing purposes:

export function* fetchData() {
  debugger;
  console.log('Fetching data');
}

export function* fetchDataWatcher() {
  console.log("watching");
  yield takeEvery('FETCH_REQUESTED', fetchData);
}    

// single entry point to start all Sagas at once
export default function* rootSaga() {
  yield all([
    fetchDataWatcher()
  ]);
}

Of course I implemented the boilerplate in my index.js:

import rootSaga from './sagas';
...

const sagaMiddleware = createSagaMiddleware();
...
const enhancers = 
  compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f,
    applyMiddleware(sagaMiddleware)
  );

const store = createStore(
  combineReducers({
   ...
  }),
  defaultState,
  enhancers
);

sagaMiddleware.run(rootSaga);

In the browser console, I see a single 'watching', but when I dispatch an action

{
type: 'FETCH_REQUESTED'
}

via Redux's devtools, I'd expect the debugger to stop my code and step me through the fetchData function... but nothing happens.

I'm sure I'm missing something very simple here - can you help me out?

EDIT:

Turns out, if I move the devTools enhancer to the end of compose, everything works fine.

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

Now I know that the resulting signature of compose depends on the last function submitted to it, still this is somewhat unclear to me... Can somebody clarify what is going on?

Redux-Saga takeEvery not calling saga

1 Answers