javascript - Redux-Saga takeEvery 不调用传奇

Question

好的，所以从 https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html 的 Hello World 教程开始我的工作，我正在尝试构建一个非常简单的获取调用......只是我的生成器函数永远不会被执行。

相关代码如下所示，目前仅用于测试目的的控制台日志记录:

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

当然，我在我的 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);

在浏览器控制台中，我看到一个“正在观看”，但是当我发送一个 Action 时

{
type: 'FETCH_REQUESTED'
}

通过 Redux 的 devtools，我希望调试器停止我的代码并引导我完成 fetchData 函数……但没有任何反应。

我确定我在这里遗漏了一些非常简单的东西 - 你能帮我吗？

编辑:

事实证明，如果我将 devTools 增强器移动到 compose 的末尾，一切正常。

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

现在我知道 compose 的最终签名取决于提交给它的最后一个函数，这对我来说仍然有些不清楚......有人可以澄清发生了什么吗？

Answer 1

尝试以这种方式创建你的rootSaga

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