CODEWITHSUNDEEP
reactjsreduxreact-redux
Francisco Bernardo
Francisco Bernardo

Reputation: 97

Should I store high-throughput, structured sensor data in redux store?

I've recently started using React and so far I have built a couple of apps, including one realtime application for manipulating and visualising sensor data. This data consists in high-throughput, structured JSON frames coming from websockets at 100Hz-200Hz.

As my app is quickly growing in complexity, and after learning about Redux through official docs and Dan Abramov's courses, I have found the use of Redux very compelling to manage the visual state of the app, routing, server information, etc.

In my React-non-Redux app everything is kept in local state, but this had a cost in the architectural design. Now, I would like to start refactoring the app to integrate redux. With my limited knowledge at this point, I'm stuck at this architectural decision about where to store the sensors streams' data and the impact on the application rendering and processing performance.

In redux docs there rules of thumb for determining what kind of data should be put into Redux:

There have been a couple of threads discussing this, but without any definitive answer. I'm also unable to comment on this (SO noob here):

I have discovered many different ramifications that I need to learn, including middleware, RxJS, etc. I would like to push development further, but as all of this will take time to grasp, I would like to refer to the community for some directions.

Thanks in advance!

Upvotes: 2

Views: 188

Answers (1)

Dakota
Dakota

Reputation: 1274

I'm currently using redux to provide data for widgets and I would say the incoming rate is somewhere around 80-90 hertz and I'm still getting 60 fps on widget canvas'. Like Dan said in his post, there is nothing inherently slow about using redux. However updating your UI 200 times a second is completely unnecessary, I would at least add some middleware (if you don't want to have a server) to redux to congregate updates to at most 60 times a second. Redux might not be that slow but trying to render 200 times a second certainly will be.

I will say however that I recently had to make the same decision you are and saving the datastreams in redux made accessing them across my application much simpler.

I found that using web workers was a good way of combining data into a single update. If you haven't already I would check them out https://developer.mozilla.org/en-US/docs/Web/API/Worker. If you decide to go in that direction it will probably help a lot with performance since the workers will be handling the websocket connections directly and causing action dispatches to redux in a more controlled manner.

Upvotes: 4

Related Questions