reduxjs - tracking on redundant data in normalizing state shape

Normalizing data in redux is common, but what the best way to handle this case.

Let's say that is the state shape:


 booksList: 
 1: ... ,
 2: ... ,
 3: ... ,
 4: ... ,
 5: ... 
 
 coolBooks: [5, 2, 1],
 hotBooks: [1, 3, 4, 5]

Now, application throw action to remove book with id 5 from coolBooks Array, no problem easy!. But in case application throw action to remove book with id 2 from coolBooks list? do I need also to remove from booksList? because it not in use anymore.

if you think I don't need to remove data from bookList, don't care and cache unnecessary. so what with memory leak? in this example is only 5 books. but in my application it could be thousand entities in booksList if i will not remove unnecessary books.

if you think I need to remove the entity from booksList if book is not exist both in coolBooks/hotBooks. what is the best practice? in my application it not only 2 categories(coolBooks/hotBooks) is can be 100. so for each remove operation check for 100 arrays this book is not exist? what about performance?

asked Nov 11 '18 at 23:25

Alin

183112

It's difficult to have a cookie cutter solution because like you say booksList might become very large, but what if you can re-add books to coolBooks? It's very dependent on your particular use case.
– Tholle
Nov 11 '18 at 23:27

I agree with your argument, but as I mention booksList might become very large if i not clear unnecessary books, but I add the condition that might be hundred categories( ex. coolBooks/hotBooks). so what is more recommend in this case? and maybe some one know for common solution.
– Alin
Nov 11 '18 at 23:39

Let react component construct the coolbooks from the list of books and remove from redux list of books. React will update the data on list of books changes.
– misraX
Nov 11 '18 at 23:48

Remove from one place, and don’t worry about the view updates, let the coolbooks be in the component state will avoid you from multiple array operations as react knows how to update and check for state changes. Avoiding complex data structure in redux reducers in this case will split the logic and gives you lower operation costs.
– misraX
Nov 11 '18 at 23:59

So if you have 1000 books and 100 lists with 11 books in each, my laptop can scan those lists to see if a book exists about 500,000 times per second. With 51 books in each of the 100 lists that drops to 130,000 times per second. If you're really worried, make the lists as objects instead of arrays. Then with 10,000 books and 1,000 lists with 251 books in each list my laptop can still do about 34,000 scans per second
– Jason Goemaat
Nov 12 '18 at 0:03

|
show 2 more comments

Normalizing data in redux is common, but what the best way to handle this case.

Let's say that is the state shape:


 booksList: 
 1: ... ,
 2: ... ,
 3: ... ,
 4: ... ,
 5: ... 
 
 coolBooks: [5, 2, 1],
 hotBooks: [1, 3, 4, 5]

if you think I don't need to remove data from bookList, don't care and cache unnecessary. so what with memory leak? in this example is only 5 books. but in my application it could be thousand entities in booksList if i will not remove unnecessary books.

if you think I need to remove the entity from booksList if book is not exist both in coolBooks/hotBooks. what is the best practice? in my application it not only 2 categories(coolBooks/hotBooks) is can be 100. so for each remove operation check for 100 arrays this book is not exist? what about performance?

asked Nov 11 '18 at 23:25

Alin

183112

It's difficult to have a cookie cutter solution because like you say booksList might become very large, but what if you can re-add books to coolBooks? It's very dependent on your particular use case.
– Tholle
Nov 11 '18 at 23:27

I agree with your argument, but as I mention booksList might become very large if i not clear unnecessary books, but I add the condition that might be hundred categories( ex. coolBooks/hotBooks). so what is more recommend in this case? and maybe some one know for common solution.
– Alin
Nov 11 '18 at 23:39

Let react component construct the coolbooks from the list of books and remove from redux list of books. React will update the data on list of books changes.
– misraX
Nov 11 '18 at 23:48

Remove from one place, and don’t worry about the view updates, let the coolbooks be in the component state will avoid you from multiple array operations as react knows how to update and check for state changes. Avoiding complex data structure in redux reducers in this case will split the logic and gives you lower operation costs.
– misraX
Nov 11 '18 at 23:59

So if you have 1000 books and 100 lists with 11 books in each, my laptop can scan those lists to see if a book exists about 500,000 times per second. With 51 books in each of the 100 lists that drops to 130,000 times per second. If you're really worried, make the lists as objects instead of arrays. Then with 10,000 books and 1,000 lists with 251 books in each list my laptop can still do about 34,000 scans per second
– Jason Goemaat
Nov 12 '18 at 0:03

|
show 2 more comments

Normalizing data in redux is common, but what the best way to handle this case.

Let's say that is the state shape:


 booksList: 
 1: ... ,
 2: ... ,
 3: ... ,
 4: ... ,
 5: ... 
 
 coolBooks: [5, 2, 1],
 hotBooks: [1, 3, 4, 5]

if you think I don't need to remove data from bookList, don't care and cache unnecessary. so what with memory leak? in this example is only 5 books. but in my application it could be thousand entities in booksList if i will not remove unnecessary books.

if you think I need to remove the entity from booksList if book is not exist both in coolBooks/hotBooks. what is the best practice? in my application it not only 2 categories(coolBooks/hotBooks) is can be 100. so for each remove operation check for 100 arrays this book is not exist? what about performance?

asked Nov 11 '18 at 23:25

Alin

183112

Normalizing data in redux is common, but what the best way to handle this case.

Let's say that is the state shape:


 booksList: 
 1: ... ,
 2: ... ,
 3: ... ,
 4: ... ,
 5: ... 
 
 coolBooks: [5, 2, 1],
 hotBooks: [1, 3, 4, 5]

if you think I don't need to remove data from bookList, don't care and cache unnecessary. so what with memory leak? in this example is only 5 books. but in my application it could be thousand entities in booksList if i will not remove unnecessary books.

if you think I need to remove the entity from booksList if book is not exist both in coolBooks/hotBooks. what is the best practice? in my application it not only 2 categories(coolBooks/hotBooks) is can be 100. so for each remove operation check for 100 arrays this book is not exist? what about performance?

javascript reactjs redux

asked Nov 11 '18 at 23:25

Alin

183112

asked Nov 11 '18 at 23:25

Alin

183112

asked Nov 11 '18 at 23:25

Alin

183112

asked Nov 11 '18 at 23:25

Alin

183112

asked Nov 11 '18 at 23:25

Alin

183112

It's difficult to have a cookie cutter solution because like you say booksList might become very large, but what if you can re-add books to coolBooks? It's very dependent on your particular use case.
– Tholle
Nov 11 '18 at 23:27

I agree with your argument, but as I mention booksList might become very large if i not clear unnecessary books, but I add the condition that might be hundred categories( ex. coolBooks/hotBooks). so what is more recommend in this case? and maybe some one know for common solution.
– Alin
Nov 11 '18 at 23:39

Let react component construct the coolbooks from the list of books and remove from redux list of books. React will update the data on list of books changes.
– misraX
Nov 11 '18 at 23:48

Remove from one place, and don’t worry about the view updates, let the coolbooks be in the component state will avoid you from multiple array operations as react knows how to update and check for state changes. Avoiding complex data structure in redux reducers in this case will split the logic and gives you lower operation costs.
– misraX
Nov 11 '18 at 23:59

So if you have 1000 books and 100 lists with 11 books in each, my laptop can scan those lists to see if a book exists about 500,000 times per second. With 51 books in each of the 100 lists that drops to 130,000 times per second. If you're really worried, make the lists as objects instead of arrays. Then with 10,000 books and 1,000 lists with 251 books in each list my laptop can still do about 34,000 scans per second
– Jason Goemaat
Nov 12 '18 at 0:03

|
show 2 more comments

It's difficult to have a cookie cutter solution because like you say booksList might become very large, but what if you can re-add books to coolBooks? It's very dependent on your particular use case.
– Tholle
Nov 11 '18 at 23:27

I agree with your argument, but as I mention booksList might become very large if i not clear unnecessary books, but I add the condition that might be hundred categories( ex. coolBooks/hotBooks). so what is more recommend in this case? and maybe some one know for common solution.
– Alin
Nov 11 '18 at 23:39

Let react component construct the coolbooks from the list of books and remove from redux list of books. React will update the data on list of books changes.
– misraX
Nov 11 '18 at 23:48

Remove from one place, and don’t worry about the view updates, let the coolbooks be in the component state will avoid you from multiple array operations as react knows how to update and check for state changes. Avoiding complex data structure in redux reducers in this case will split the logic and gives you lower operation costs.
– misraX
Nov 11 '18 at 23:59

So if you have 1000 books and 100 lists with 11 books in each, my laptop can scan those lists to see if a book exists about 500,000 times per second. With 51 books in each of the 100 lists that drops to 130,000 times per second. If you're really worried, make the lists as objects instead of arrays. Then with 10,000 books and 1,000 lists with 251 books in each list my laptop can still do about 34,000 scans per second
– Jason Goemaat
Nov 12 '18 at 0:03

It's difficult to have a cookie cutter solution because like you say booksList might become very large, but what if you can re-add books to coolBooks? It's very dependent on your particular use case.
– Tholle
Nov 11 '18 at 23:27

I agree with your argument, but as I mention booksList might become very large if i not clear unnecessary books, but I add the condition that might be hundred categories( ex. coolBooks/hotBooks). so what is more recommend in this case? and maybe some one know for common solution.
– Alin
Nov 11 '18 at 23:39

Let react component construct the coolbooks from the list of books and remove from redux list of books. React will update the data on list of books changes.
– misraX
Nov 11 '18 at 23:48

Remove from one place, and don’t worry about the view updates, let the coolbooks be in the component state will avoid you from multiple array operations as react knows how to update and check for state changes. Avoiding complex data structure in redux reducers in this case will split the logic and gives you lower operation costs.
– misraX
Nov 11 '18 at 23:59

So if you have 1000 books and 100 lists with 11 books in each, my laptop can scan those lists to see if a book exists about 500,000 times per second. With 51 books in each of the 100 lists that drops to 130,000 times per second. If you're really worried, make the lists as objects instead of arrays. Then with 10,000 books and 1,000 lists with 251 books in each list my laptop can still do about 34,000 scans per second
– Jason Goemaat
Nov 12 '18 at 0:03

|
show 2 more comments

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53254266%2freduxjs-tracking-on-redundant-data-in-normalizing-state-shape%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb