CODEWITHSUNDEEP
jsonreactjsredux
tdk
tdk

Reputation: 151

BIG data in redux store

Well, let's get straight to the point. Thing is that I am getting bunch of data from API in JSON format(~1.5MB could be even more) and I should store that data in redux store. And show that data in kind of table/list.

To be more accurate I am getting something like this:

{
    id: 1,
    name: "John",
    surname: "Snow",
    hobby: "to know nothing"
}...

and I should show such data in editable table, something like this:

id|name|surname|hobby
1 |John|Snow   |to know nothing

So, my question is what would be the best way of storing and displaying such amount of data in redux store? Important thing to notice is that API has no pagination option, I am getting all the data in one chunk.

And now I am storing data in store like this:

{
    usersById: {
       1: {
           id: 1,
           name: "John",
           surname: "Snow",
           hobby: "to know nothing"
       }...
    }
}

and I believe that's fine. But my biggest concern that page is lagging or even freeze for a while once I get data from API, put it in store and display it in simple divs all at once. And I am not sure if that's OK as there is no possibility to get that data from API in chunks? Or am I doing something wrong? Because I am not doing any magic with that data, just simple get->put to store->display data in simple divs.

Any comments would be very appreciated.

Thanks :)

Upvotes: 2

Views: 3037

Answers (1)

Lucas
Lucas

Reputation: 4097

Storing the data in your Redux store will probably do fine unless you're doing some heavy computation after downloading the data. But you may notice some of the problems you described when rendering the table.

One solution would be to window the results, i.e. all data is loaded in the Redux store, but you don't display everything at once.. instead you render the first 25/50/100 and only render more when you get to the bottom of the table (and can unmount the first ones that are not visible anymore).

A popular library to achieve this is react-virtualized, it makes really easy to implement this kind of logic of only rendering what is actually visible on the screen.

Upvotes: 4

Related Questions