Redux-Saga takeEvery n'appelle pas la saga

Question

Ok, donc en remontant du tutoriel Hello World au https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html, j'essaye de construire un appel de récupération très simple ... seulement que ma fonction de générateur ne soit jamais exécutée.

Le code correspondant se présente comme suit, pour l'instant console simplement vous connecter à des fins de test:

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() 
    ]); 
} 

Bien sûr, je mis à exécution les passe-partout dans mon 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); 

Dans la console du navigateur, je voir un seul 'regarder', mais quand j'expédie une action

{ 
type: 'FETCH_REQUESTED' 
} 

via devtools de Redux, je m'attendrais à ce que le débogueur arrête mon code et me passe par la fonction fetchData ... mais rien ne se passe.

Je suis sûr qu'il me manque quelque chose de très simple ici - pouvez-vous m'aider?

EDIT:

fin de compte, si je déplace l'amplificateur DEVTOOLS à la fin de compose, tout fonctionne très bien.

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

Maintenant, je sais que la signature résultant de compose dépend de la dernière fonction qui lui est soumise, encore c'est un peu difficile de me ... Quelqu'un peut-il clarifier ce qui se passe?

Answer 1

Essayez de créer votre rootSaga de cette façon

export default function * root() { 
    yield [ 
    fetchDataWatcher() 
    ] 
}