Javascript 成功操作运行多次

Javascript 成功操作运行多次,javascript,reactjs,immutable.js,redux-saga,Javascript,Reactjs,Immutable.js,Redux Saga,我正在使用redux saga从服务器获取异步操作的数据。我可以获取数据,但我认为我做得不够有效。因为我的电子邮件服务获取成功操作会运行多次。在给出示例之前,我想澄清一下我的应用程序结构 AdminDashboardadmin/dashboard-具有 侧导航和路由组件作为子组件 SideNavigation有一些链接,单击这些链接将在 页面中间,侧导航旁边 现在问题来了。当我进入route/admin/dashboard/email_服务时,我得到了我所期望的数据。之后,如果我点击一些其他链接

我正在使用redux saga从服务器获取异步操作的数据。我可以获取数据,但我认为我做得不够有效。因为我的电子邮件服务获取成功操作会运行多次。在给出示例之前,我想澄清一下我的应用程序结构

AdminDashboardadmin/dashboard-具有 侧导航和路由组件作为子组件

SideNavigation有一些链接,单击这些链接将在 页面中间,侧导航旁边

现在问题来了。当我进入route/admin/dashboard/email_服务时,我得到了我所期望的数据。之后,如果我点击一些其他链接并返回电子邮件服务,那么成功行动会被多次触发,并且会不断增加

index.js


好的,我查看了您的回购协议,发现了问题:

这是EmailService/sagas.js中的代码,请检查我添加的注释

function* setupemailService(action) {
  const successWatcher = yield fork(redirectOnSuccess);
  yield fork(...);

  // 1. On LOCATION_CHANGE you are only cancelling the `successWatcher`
  yield take([LOCATION_CHANGE, EMAIL_SERVICE_SETUP_FAILURE]);
  yield cancel(successWatcher);
}

function* emailServiceWatcher() {

  yield takeLatest(EMAIL_SERVICE_SETUP_REQUEST, setupemailService);

  // 2. you never cancelled `EMAIL_SERVICE_FETCH_REQUEST` watcher
  yield takeLatest(EMAIL_SERVICE_FETCH_REQUEST, fetchemailService);
}

export default [emailServiceWatcher];
你需要做的就是这样

function* emailServiceWatcher() {
  const setupeWatcher = yield takeLatest(EMAIL_SERVICE_SETUP_REQUEST, setupemailService);
  const fetchWatcher = yield takeLatest(EMAIL_SERVICE_FETCH_REQUEST, fetchemailService);
  // Cancel these watchers on LOCATION_CHANGE
  yield take([LOCATION_CHANGE]);
  yield cancel(setupeWatcher);
  yield cancel(fetcheWatcher);

}

您在哪里调用sagaMiddleware.run?在导航中,您似乎再次运行了saga中间件?另外,如果您登录fetchemailService生成器函数,在收到电子邮件\u SERVICE\u FETCH\u请求后会调用它多少次这是我的github repo。我认为共享repo会很好,因为我正在做异步路由,你测试过吗?我确实更改了异步sagas代码,该代码对我也适用,但您的解决方案在其他时间也适用。
function* emailServiceWatcher() {
  const setupeWatcher = yield takeLatest(EMAIL_SERVICE_SETUP_REQUEST, setupemailService);
  const fetchWatcher = yield takeLatest(EMAIL_SERVICE_FETCH_REQUEST, fetchemailService);
  // Cancel these watchers on LOCATION_CHANGE
  yield take([LOCATION_CHANGE]);
  yield cancel(setupeWatcher);
  yield cancel(fetcheWatcher);

}