Optimize component state mapping and reduce unnecessary updates

This commit is contained in:
Samuel Andert 2023-07-24 16:41:00 +02:00
parent e12f6bcf05
commit 0e6a956511
2 changed files with 8 additions and 27 deletions

View File

@ -27,11 +27,6 @@
if (component.map) {
const localStore = getComponentStore(component.id);
// Use the subscribe method to log and work with the store's value
localStore.subscribe((localStoreValue) => {
console.log('Local store before mapping:', localStoreValue);
});
for (const [localKey, external] of Object.entries(component.map)) {
const [externalID, externalKey] = external.split('.').map((item) => item.trim());
const externalStore = getComponentStore(externalID);
@ -41,18 +36,17 @@
if (externalState && externalKey in externalState) {
localStore.update((storeValue) => {
storeValue = storeValue || {};
storeValue[localKey] = externalState[externalKey];
return storeValue;
if (storeValue[localKey] !== externalState[externalKey]) {
// Only update if there's a change
storeValue[localKey] = externalState[externalKey];
return storeValue;
}
return storeValue; // Return existing state if no change
});
}
});
}
}
// Use the subscribe method again if you want to log after mapping
localStore.subscribe((localStoreValue) => {
console.log('Local store after mapping:', localStoreValue);
});
}
if (component.children) {

View File

@ -5,14 +5,13 @@
layout: `
grid-template-areas:
"login",
"main"
"footer";
grid-template-rows: 1fr 1fr auto;
grid-template-rows: 1fr;
`,
children: [
{
id: 'login1',
componentName: 'Login',
slot: 'Login',
children: [
{
id: 'wallet1',
@ -31,18 +30,6 @@
]
}
]
},
{
id: 2,
componentName: 'Messages',
props: {},
slot: 'main'
},
{
id: 3,
componentName: 'Terminal',
props: {},
slot: 'footer'
}
]
};