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?
javascript reactjs redux
asked Nov 11 at 23:25
Alin
183112
|
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]
}
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?
javascript reactjs redux
asked Nov 11 at 23:25
Alin
183112
It's difficult to have a cookie cutter solution because like you saybooksListmight become very large, but what if you can re-add books tocoolBooks? It's very dependent on your particular use case.
– Tholle
Nov 11 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 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 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 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 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]
}
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?
javascript reactjs redux
asked Nov 11 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]
}
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?
javascript reactjs redux
javascript reactjs redux
asked Nov 11 at 23:25
Alin
183112
asked Nov 11 at 23:25
Alin
183112
asked Nov 11 at 23:25
Alin
183112
asked Nov 11 at 23:25
Alin
183112
asked Nov 11 at 23:25
Alin
183112
183112
It's difficult to have a cookie cutter solution because like you saybooksListmight become very large, but what if you can re-add books tocoolBooks? It's very dependent on your particular use case.
– Tholle
Nov 11 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 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 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 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 at 0:03
|
show 2 more comments
It's difficult to have a cookie cutter solution because like you saybooksListmight become very large, but what if you can re-add books tocoolBooks? It's very dependent on your particular use case.
– Tholle
Nov 11 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 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 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 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 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 at 23:27
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 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 at 23:39
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 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 at 23:48
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 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 at 23:59
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 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 at 0:03
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 at 0:03
|
show 2 more comments
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It's difficult to have a cookie cutter solution because like you say
booksListmight become very large, but what if you can re-add books tocoolBooks? It's very dependent on your particular use case.– Tholle
Nov 11 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 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 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 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 at 0:03