react-blessed not working with react-redux

[zcaudate]

Copying from the response to a question I asked here

• 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

[Yomguithereal]

Hello @zcaudate, this is unfortunate indeed. But you seem to have a better understanding of the issue than I have currently and thus I was wondering whether you would like to attempt a PR to fix the problem, maybe by upgrading the underlying reconciler?

[zcaudate]

@Yomguithereal Hahaha. No, not at all. That was from one of the the maintainers of the redux project. I'm coming in to react from vue so am doing some simple projects to better understand the ecosystem.

[markerikson]

Hiya! Yeah, the issue here is that react-blessed has a dependency on "react-reconciler": "^0.20.4". Per my investigation, that version of react-reconciler has a bug in how it checks for running passive effects, and this is causing React-Redux to run a subscription cleanup when it shouldn't.

As of react-reconciler@0.21.0, that chunk of the code has been completely rewritten.

The current version is react-reconciler@0.26.1.

Per that SO discussion, there's a couple other tweaks that we should make on the React-Redux side as well, but the real bugfix is to upgrade react-blessed to use the latest version of react-reconciler. I'm not sure how much additional effort might be needed to update the host config after bumping the dependency version, though.

[zcaudate]

@markerikson is it just as simple as upgrading the react-reconciler version?

I'd like to give it a go.

I did some quick and dirty (using immer instead of redux)

• https://github.com/zcaudate/play.tui-grid-history
• https://github.com/zcaudate/play.tui-grid-movement
• https://github.com/zcaudate/play.tui-game-of-life

Maybe this is related but I found that when I'm using an async timer to switch state, the UI updates once and does not update again

[zcaudate]

@Yomguithereal: are there any instructions for compiling this library?

[Yomguithereal]

@zcaudate I am not sure to precisely know what you mean by "compiling" in this context. Just install deps with npm i, run the units tests with npm test and, most importantly, try to run some examples using npm run demo to see if what you did still works.

[zcaudate]

Sweet I'll take a look in the next couple of days

Just for completeness' sake with the counter examples:

• https://github.com/zcaudate/play.tui-counter-basic
• https://github.com/zcaudate/play.tui-counter-redux
• https://github.com/zcaudate/play.tui-counter-immer

I was hoping to get snake and pong working but the async animation thing not working kinda put a damper on it.

[Yomguithereal]

v0.7.0 should have fixed this issue? Can someone confirm and close the issue or ask me to do it please?

[markerikson]

I just tried updating the bug repro counter project I was given, and it does appear to be updating correctly now. So, I'm gonna give a thumbs-up.

[zcaudate]

yep. it's working for me too!