State Management for Animations Using React Native and Redux

Question

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?

Answer 1

I've been developing React for only 9ish months, and so I'm probably a n00b compared to the likes of you Matt, and I can say without much hesitation that redux is awesome, but that it shouldn't replace internal component state in all circumstances. Especially for things like animations. You asked this yourself, but I ask again: why would this need to be in a global state? Redux is there to allow components across an application to get updated state when things happen throughout your application. That does not mean, however, that there should never be any state anywhere in your application except for in a Redux store.

A man much smarter than me said

If you feel pressured to do things “the Redux way”, it may be a sign that you or your teammates are taking it too seriously. It’s just one of the tools in your toolbox, an experiment gone wild. Local state is fine....

The tradeoff that Redux offers is to add indirection to decouple “what happened” from “how things change”. Is it always a good thing to do? No. It’s a tradeoff.

What is this I'm quoting? What kind of blasphemous React developer could possibly say that Redux shouldn't be used for all things React??

I'll tell you who. The creator of Redux.

https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.flb8fzjr8

TLDR Use Redux where it is useful and where it makes sense. It's awesome for what it's suppose to do. But don't try to fit that round peg into a square hole.

I hope this is useful.