How To Pass Event From Redux To React?

Question

I have a GUI react/redux based app. As part of the view there is a "indicator" react component which I wish to blink, and the blinking is done with a CSS3 animation (animation frames). The indicator.blink() member function of the react component is called to make the indicator blink (it basically removes the blink class from the DOM element, then adds it again 1ms later, as a hack to get around the fact that there is no "restart" api for a CSS3 animation).

Upon certain actions occurring in the redux framework (they can be thunks if needed), I wish to call this blink() function in the react view. How best to do this?

It doesn't feel right to have the redux action modify the app state, and then the indicator element bind to one of the state variables as a prop, since it's not really a state, but an instantaneous event. But I know of no other way to get a redux action to change a react component.

Answer 1

Suppose you want to use the blink thing to show when something increases, you can simply keep a counter in your state and in your component's internal state keep the previous value. When it changes, blink and save the new value.

In other words, derive your desired event information from state changes you care about.

It is totally fine to use internal state for this sort of transient behavior, that is what it is for.