Startup race condition - sagas injected after dispatched actions don't fire

Description

Suppose a child component of a parent container dispatches an action from the parent container (with useEffect or useLayoutEffect), the action is dispatched before the saga watchers (and even the parent reducer) have started and is thus missed.

If this isn’t a bug, what are the best strategies to accomplish something like this. Adding a delay in the use hook seems wrong.

Steps to reproduce

See example

Expected behavior

I would expect the parent’s reducers/sagas to be injected by the time the child dispatches the action. In this case, the state should have the new username.

Screenshots If applicable, add screenshots to help explain your problem.

Versions

• React-Boilerplate: dev (master too)
• Node/NPM: 6.13.6 Browser: brave/chrome

[alon-s]

Thinking about it even further, the useInjectSaga has a different behavior then the HOC. While useInjectSaga uses the useEffect hook, which is similar to componentDidMount, the injectSaga HOC uses the constructor. This is what causes the unexpected behavior from children nodes that are using useEffect or componentDidMount.

[tmreay]

The more I think about it, a better solution is probably to just use the injectSaga HOC, instead of the hook.