react redux store updates once and then stops updating

Question

I have an example of a tui-counter done using react-blessed and I'd like to connect redux to it. The code is here.

When I press on any button - say INC, it updates once and then stops updating. It seems that the counter state is incrementing but it's not rendering to the ui. Below is an example of the output. I don't know where I have gotten the wiring wrong I suspect here but I've tried a couple of things and it hasn't worked because I'm not sure if it's a redux issue or a blessed issue. Any tips would be great.

question from:https://stackoverflow.com/questions/65651830/react-redux-store-updates-once-and-then-stops-updating

Answer 1

I'm a Redux maintainer, and I implemented React-Redux v7.

By bizarre coincidence, I actually debugged this exact issue for someone else recently over in Reactiflux (or at least I think it was someone else).

The first problem here is that you need to be using the "alternate renderer" entry point for React-Redux, because the primary entry point assumes you're using react-dom or react-native. So, you need import { connect } from "react-redux/lib/alternate-renderers".

However, even once you do that, there is actually a bug in react-blessed, combined with a sort of deficiency in React-Redux. The result is that React-Redux's <Provider> ends up unsubscribing itself from the store after the first action is dispatched, which causes all further dispatched actions to result in no UI updates.

It's a combo of three things:

• react-blessed is using an old version of react-reconciler which has a bug in it related to calling useEffect, and react-blessed really needs a new release that uses the latest version of react-reconciler
• Sorta related, React-Redux's <Provider> is still calling useEffect instead of our useIsomorphicLayoutEffect wrapper, but that would still fall back to actually being useEffect because this is running in a Node environment instead of a browser
• To fix that, we'd need to have a way for you as the end user to say "no, I really do want this to be useLayoutEffect to fix timing issues when running under Node", and we don't currently expose an API to do that right now.

Pasting my notes from that debugging session:

• there's a bug somehow between react-blessed and react-reconciler that is causing useEffect cleanup functions to be run when they shouldn't be. This may be due to react-blessed keeping around this runningEffects array, or it may be due to something odd in this specific version of react-reconciler. Either way, the root cause of the behavior you're seeing is that Provider is unsubscribed when it shouldn't be because it was calling useEffect , and then having its cleanup function run when you dispatched a new Redux action and queued a UI update. That caused a flush of passive effects, which hits this bit:

function flushPassiveEffects() {
 if (passiveEffectCallbackHandle !== null) {
   cancelPassiveEffects(passiveEffectCallbackHandle);
 }

however, I'm seeing that passiveEffectCallbackHandle is undefined, not null, so it's erroneously trying to call cancelPassiveEffects(). That seems like a bug in this version of react-reconciler.

That then causes react-blessed to try to clean up its runningEffects array, which nukes the effect handler