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

Question

I'm working on a large scale project in which we're using Redux SAGA. The Redux SAGA handles about 180 side effects and the whole codebase is pretty big. I'm using lazy loading to handle downloading fewer bundle bundle size at the first time, but there's a problem.

I've recently found out that when opening the website (with new bundle) for the first time, the spawn action works, but the takeLatest or any other sideEffect Handler that takes a redux Action doesn't work.

It fixes when I refresh the page and open the website again, when it takes the js bundles from the catch for the second time. If I close and reopen the incognito, I can see this issue again. (no side effect handler works for the first time)

I've checked the whole SAGA several times and it's totally okay.

Do you have any idea about how to fix such issue?

Answer 1

The main issue was running SAGA middleware in App.tsx. When I took the sagaMiddleware.run(rootSaga); code into the Router component, it fixed, because the router component is the heaviest component (with a lot of route components, some of them are not splitted) and of course using useLayoutEffect was another trick. So puting this component:

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

  .....
}

in the first big component in the application hierarchy (this one is the most important thing you should do) will fix the issue of not running SAGA properly on the first download of the app bundle.