Background

I've been building an application using React Native & Redux to make an assessment over whether to use it for an upcoming project over Swift and going fully native.

I genuinely believe that Dan Abramov's techniques with Redux are a case of solid engineering. Not updating the state and having the view as a function of the state is great, and I'm very much on board with the idea. Where I'm coming somewhat unstuck is with throwing animations into the mix.

Scenario

More complicated animations require state management, for example, fading out a view, replacing the text and fading it back in. I'd only want to update the text halfway through the animation, and this is easy enough to do using local state and leveraging the Animated framework.

Say the text to be displayed is driven by the state, it'd be updated the moment the state is changed via an appropriate action & reducer combo, but for the sake of presentation I need it between these two animations.

An example of this would be selecting a record from a list, where there's an on-screen label showing the name of the selected record. Ideally you'd want to update the global store straight away, but perform a nice transition on the label itself.

My Thoughts

To my mind it makes some amount of sense to use 'local state' inside of components to deal with animations, and the main Redux store for more overall data or architecture state. The problem is this breaks the idea of the view being a function of the global state and I'm not sure that sits right with me.

On the other hand, managing animation sequences etc. by writing heaps of actions, reducers and cluttering up the store also doesn't feel clean.

The Question

I know React Native is in it's infancy, and not everybody is using Redux, but is there a generally accepted way of managing animations in this kind of scenario?