Where to handle Animations? about flux

[fisherwebdev]

It's difficult to say without more context. This might be a situation where I would utilize the component's state, or I might move the state to the store. I think it would depend on the situation, and how the animation relates to the rest of the application state.

If you were to use the component's state, you could set up a requestAnimationFrame (rAF) in the component and call setState() with a new value on every cycle of the rAF. You could also do something similar in the store instead.

If you were using CSS transitions, you might let other parts of the application know you are currently animating (if needed) with a new action, store that state in the stores, and then when the animation is over, dispatch a new action to inform other parts of the app again.

The only complex animation I've done with React/Flux has been with a rAF in the store, and it was managing a very long animation -- over a minute in length.

For shorter, more UI-oriented things, I think I would keep the animation state in the components, and the more application-oriented state in the store. For example, I would have a value in the store like _isEditing. When _isEditing is true, the user should see an edit interface in a modal. When _isEditing first changes from false to true (checked in componentWillReceiveProps), the react component changes its state and starts the animation.

cc @sebmarkbage