6

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.

Improve this question

3 Answers 3

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

That makes perfect sense for when something increases. I first thought that this didn't apply to my scenario, but after reading the "derive your desired event information from state changes you care about" statement I realised a counter did fit this purpose.
1

Imagine CSS transitions are implementation detail and you don't expose methods on components. (You usually shouldn't anyway.)

How would that be driven by props only? I'd imagine by a boolean prop isBlinking. This is what you can keep in Redux state if you wish so. Have an action creator that dispatches START_BLINK and STOP_BLINK after some milliseconds.

Or you can avoid using Redux for this and call method imperatively from parent component.

Improve this answer

6 Comments

What if there was such a "restart" animation in CSS3? In that scenario, there would be no need for a STOP_BLINK, and repeatedly setting isBlinking to true wouldn't tell the React component anything so that it could act and restart the animation. Basically, I'm trying to find a use case in where a Redux action needs to send an event to the React view, in where changing state doesn't make sense because the item is "timeless" (i.e. an event). Am I thinking up the impossible/improbable?
If you have this situation you just need to circumvent Redux and React flow and do it imperatively. Not really related to Redux. Do imperative effect where you fire the action.
An imperative effect? Is this some way of communicating from a Redux action to a React component? I had a look into getting access to React components from inside an action, but it didn't look easy (i.e. saving what React.render() returns to a global variable, and then using a React test utilities function to dig out a child component).
No, I just mean a method call like you did before. What you describe doesn't fit Redux paradigm and you shouldn't use Redux for that. Just do it normally like you did by calling component method when you want it to blink.
Oh, but what if the action doesn't get dispatched by react (in where it would be easy to call a component function), but rather a server callback or similar (in my case it's data that's been received on a serial port), and I have no way of accessing the react component(s)?
|
0

There's no "restart" in CSS animation, but you can specify iteration count to be infinite, which seems like it would solve your issue without involving Redux at all, other than perhaps toggling the .blinking class on or off depending on of 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;
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.