How to get an event from Redux to respond?

Question

I have a GUI / abbreviation application. As part of the view, there is a “indicator” component that I want to blink, and blinking is done using CSS3 animations (animated frames). The indicator.blink() member function for the responding component is called to make the indicator blink (it basically removes the blink class from the DOM element and then adds it again after 1 ms, as a hack to circumvent the fact that there is no "restart" "api for CSS3 animation).

For certain actions that take place in the redux structure (they can be gaps, if necessary), I want to call this function blink() in the reaction view. What is the best way to do this?

It is not correct that the redux action changes the state of the application, and then the indicator element is associated with one of the state variables as prop , since this is not really a state, but an instant event. But I don’t know any other way to get the redux action to modify the responsive component.

Answer 1

Imagine CSS transitions are implementation details, and you don't expose components to methods. (Usually you shouldn't.)

How can this be caused only by the details? I would suggest using boolean support isBlinking . This is something you can keep in Redux state if you want. You have an action creator that sends START_BLINK and STOP_BLINK in a few milliseconds.

Or you can avoid using Redux for this and force the method to be called from the parent component.

Answer 2

Suppose you want to use the blink object to show when something is incrementing, you can just keep the counter in its state and keep the previous value in the internal state of your component. When it changes, blink and save the new value.

In other words, you will receive the necessary information about the event from the state changes that you care about.

It is perfectly normal to use the internal state for this kind of transitional behavior, for which it is intended.

Answer 3

There is no “restart” in the CSS animation, but you can specify an infinite iteration counter that seems to solve your problem without involving Redux at all, except perhaps turning the blinking class on or off depending on whether you want it to blink or not.

 @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1} 100% { opacity: 0; } } .blinking{ animation-name: blink; animation-duration: 1s; animation-iteration-count:infinite; }