Redux SAGA sideEffect 处理程序在第一次下载 React 包时不起作用

Question

我正在处理一个使用 Redux SAGA 的大型项目。 Redux SAGA 处理大约 180 个副作用，整个代码库相当大。我正在使用延迟加载来处理第一次下载较少的包包大小，但是有一个问题。

我最近发现，当第一次打开网站（带有新包）时，spawn 操作有效，但是 takeLatest 或任何其他需要redux 操作不起作用。

它修复了当我刷新页面并再次打开网站时，当它第二次从 catch 中获取 js 捆绑包时。如果我关闭并重新打开 incognito，我会再次看到这个问题。（没有副作用处理程序第一次工作）

整个SAGA我检查了好几遍，完全没问题。

您知道如何解决此类问题吗？

Answer 1

值得尝试更改 useEffect，将您的 sagas 发送到 useLayoutEffect，这样它只会在 DOM 完成加载时调用 saga，也就是在完成捆绑包下载时。

Answer 2

主要问题是 App.tsx 中的运行 SAGA 中间件。当我将 sagaMiddleware.run(rootSaga); 代码放入 Router 组件时，它修复了，因为 router 组件是最重的组件（有很多路由组件，其中一些没有拆分）当然使用 useLayoutEffect是另一个把戏。所以把这个组件：

const AppRouter = () => {
  useLayoutEffect(() => {
    sagaMiddleware.run(rootSaga);
  }, []);

  .....
}

在应用程序层次结构的第一个大组件中（这是你应该做的最重要的事情）将修复在第一次下载应用程序包时不正确运行 SAGA 的问题。

Redux SAGA sideEffect 处理程序在第一次下载 React 包时不起作用

Redux SAGA sideEffect handler doesn't work when downloading React bundle for first time

bundle

reactjs

redux

redux-saga