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

Posted 2023-02-18

【中文标题】第一次下载 React 包时 Redux SAGA sideEffect 处理程序不起作用

【英文标题】：Redux SAGA sideEffect handler doesn't work when downloading React bundle for first time

【发布时间】：2022-01-06 14:27:05

【问题描述】：

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

我最近发现，第一次打开网站（带有新捆绑包）时，spawn 操作有效，但 takeLatest 或任何其他采用 redux 操作的副作用处理程序不起作用.

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

我已经检查了整个 SAGA 几次，完全没问题。

您对如何解决此类问题有任何想法吗？

【问题讨论】：

这听起来像是一个竞争条件。您能否提供有关您的应用的更多信息？什么是延迟加载——也只是对组件或 sagas/reducers/etc 做出反应？如果您延迟加载 sagas/reducers，您如何将它们注入应用程序，您是否使用任何 3rd 方解决方案？失败的takeLatest 是在延迟加载的块中还是在入口块中？

【参考方案1】：

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

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

  .....

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

【参考方案2】：

值得尝试将您的 useEffect 更改为 useLayoutEffect，因此它只会在 DOM 完成加载时调用 saga，也就是在完成捆绑包下载时。