State is not updated for put/get sequence

[richard-ejem]

See my example app:
https://github.com/richard-ejem/use-saga-reducer-test/blob/master/src/App.tsx#L12

When redux-saga is used with redux, updated state is available to selects immediately, however with useSagaReducer it is not.

The probable cause is that redux dispatch updates the synchronously while react's useState/useReducer does not, however I have no idea how to fix it elegantly.

[forivall]

imo, it's probably best document this as a known issue / difference between using sagas in redux vs in useReducer, so that react fiber can keep things speedy.

[richard-ejem]

@forivall I don't think that's enough. This is a serious blocker for me and I think possibly for many other developers from using this hook. When one start building more complex sagas (which I assume one will, since sagas are suitable for solving complex problems), you can hardly write reliable code when your saga may get outdated state.

[alex-kowalczyk]

@richard-ejem have you found any reliable solution or workaround for the problem?

[richard-ejem]

@alex-kowalczyk we ended up with writing our own abstraction of React state for complex components, which has a way to get immediate state thanks to internal use of useRef. It seems this cannot be achieved with pure useState as there is no warranty that the state will be updated before actual next rerender.

[alex-kowalczyk]

@forivall I agree with @richard-ejem this is a quite fundamental issue, as the state received by yield select() is non-deterministic - sometimes it is previous state, sometimes new state. This makes non-trivial sagas unusable or impossible to implement.

I found an article describing a way to solve that:
https://javascript.plainenglish.io/create-redux-like-middleware-for-usereducer-in-react-786a0a28545c#af51
Long story short, instead of calling channel.put asynchronously, channel.put should be called in a separate useEffect(..., [state, sagaIO.channel]).
Action can be still accessible by defining useRef and storing the action there before calling reactDispatch.

Do you think this could work?

[forivall]

Yeah, I was giving this a bit of thought a while back, and I'm thinking that it could be possible to leverage the scheduler library that react uses internally, although i only briefly investigated it.