Search code examples
reactjsredux

Triggering an action through the ui behaves differently than when handled with a key event

I have an undo/redo system implemented that fires some redux actions that it accumulated. If I trigger this dispatch through the UI the flow seems to be different than when I do the exact same thing by subscribing to a key event.

I can trigger undo with "ctrl + z" or by clicking on a button in the UI. There is an entity that listens to store changes and does some logic. When clicking on the UI, this subscription runs first, and then the rest of my UI is updated. If I do this with the key event, the UI responds first, and the store subscriber later.

How could I make this consistent?

enter image description here

The trace is different right before my dispatch. This is when I click a UI element with the mouse. With the key down, this entire list is missing and I only see the keydown handler right before the dispatch.

enter image description here

Solution

  • It seems that this is related to batching somehow, and the key handler is synchronous. It's possible to reproduce this in a simple example by having a store subscription happen after reactDom has rendered.

    It seems that the solution for my use case is to subscribe to the store before react dom.