CODEWITHSUNDEEP
javascriptperformancereactjsreduxnwjs
AlexKempton
AlexKempton

Reputation: 1698

Redux performance with lots of changes to the store every second

I'm creating an audio-visual app for performances at clubs/parties. It involves webGL animation that runs at 60fps.

The animation responds to multiple parameters that could be constantly changing every second (e.g. The size of a spinning cube could be pulsing to music). As an example, there may be 20 parameters, all changing sixty times per second. These parameters are represented in the UI as numbers/visual bars.

I'm using React/Flux/NWJS to do this and it works fine. However I really like Redux and would like to change the data flow to the Redux model.

My question is: Will updating the store in an immutable way (e.g. replicating it for each change) affect performance, when it could be changing more than 60 times per second? If so, is there a way I can bypass this for certain parts of the app and just use Redux for the less frequent changes to the app.

Upvotes: 0

Views: 883

Answers (1)

CharlieBrown
CharlieBrown

Reputation: 4163

If you're using WebGL for your visuals, you may keep Redux but skip React all. Redux is independent from React, you are free to use its semantics and then do something when the Store is changed by registering a callback with subscribe.

http://es.redux.js.org/docs/api/Store.html#subscribe

It's not clear to me the aspect of your app, will be both the visualization with WebGL and the sliders/controls present at the screen at the same time?

If they are, you can still have a React app hosting your UI controls and a separate DIV containing your canvas. The React part will use standard Redux to keep the parameters state, and your WebGL independent code should read from the store on every requestAnimationFrame and render your scene.

You could also use a Redux middleware that queues actions and dispatch on requestAnimationFrame, as suggested in the docs here (see the rAF scheduler example)

http://redux.js.org/docs/advanced/Middleware.html#seven-examples

Upvotes: 1

Related Questions