22

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?

Community
  • 1
  • 1
Matt Lacey
  • 8,227
  • 35
  • 58
  • I'm really interested on this, have been thinking about the same scenario. – bilby91 Jan 04 '17 at 15:41
  • I asked myself similar question. I don't think Redux was designed to handle animations and transitions. If you consider each animation frame a state, then you have to dispatch at least 60 actions per second. It's going to make your app more complicated and there is little benefit. Consider this scenario: you tap on a button on a page, then it navigates to a different page. It makes sense to define states on each page. But how do you define states for that navigation stack? I've built some apps where view states make no sense due to the amount of animation and perf requirements. – Haitao Li Jan 24 '17 at 06:56
  • Yeah, I've gone with the idea of using local state to control animations, but it's still not sitting 100% right with me! – Matt Lacey Jan 24 '17 at 06:57

1 Answers1

16

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.

Ryan Pfister
  • 3,176
  • 4
  • 24
  • 26
  • Nah, you've been doing it longer than me! I agree with what you say, and I'd seen Dan's bit before as well. Going to accept this because it seems to be a consensus from all of the conversations I've had. – Matt Lacey Feb 21 '17 at 01:31
  • 2
    I am totally agree with @Ryan Pfister , but in some special cases like for react navigation nested navigator, if you would like to animate the header of stack navigator with Onscroll which is inside an tab navigator , redux is a good choice for animation – Farhad Kabir Feb 22 '20 at 16:27