question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reviving nested states from localstorage results in loss of part of nested initial state values

See original GitHub issue

Suppose I have this initial state:

{ 
   someKey: {}
   itemResults: {
          items: [], 
          totalItems: 0,
          isListView: true
    },
   someOtherKey: {}
}

and I have this config:

localStorageSync({
    keys: [{itemResults: ['isListView']}],
    rehydrate: true
})

and I have this state being revived from localStorage:

{ 
   itemResults: {
       isListView: false
   }
}

Which means during @ngrx/store/init, since we only do a shallow merge of keys using Object.assign, I end up with the following state:

{ 
   itemResults: {
       isListView: false
   }
}

So basically if you use a nested key or keys, then that slice of state overrides the whole slice of initialState for the top level key. I was thinking it’d be nice if I could just use lodash’s merge to merge (or basically Object.assign nested keys also)<del>, but I don’t want to bloat this library either. It would be nice if I could supply a function to the library to use to do the merge, then I could just use lodash.merge there instead of bundling it with the library. </del>

<del>Could we possibly add a config option to allow the user to provide a custom merge function? Basically something like this?</del>

export const localStorageSync = (config: LocalStorageConfig) => (reducer: any) => {
    // ... code omitted

    const mergeFunction = config.customMergeFunction || ((state, rehydratedState) =>  Object.assign({}, state, rehydratedState));

    return function (state = rehydratedState, action: any) {
        
        if (action.type === INIT_ACTION && rehydratedState) {
            state = mergeFunction(state, rehydratedState);
        }
     
        // ... code omitted
    };
};

<del>Any thoughts/objections, anyone?</del>


EDIT: Renaming the thread since it appears that there’s a general consensus that a deep merge should be the default behavior here.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:9
  • Comments:21

github_iconTop GitHub Comments

18reactions
adamkleingitcommented, Dec 4, 2017

I don’t really understand how this library is usable without fixing this. If I want to sync only part of the state, it makes sense that the rest of the initial state will not be changed by default. Unless I’m missing something

5reactions
vvolodincommented, Oct 24, 2018

What is preventing this issue from being fixed for more than a year? Any help needed?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Change a value from a nested object using localstorage
I have this code that set the obj value in localstorage. const obj = { name: "Bill", meta: { age: 18 } };...
Read more >
Save UI states - Android Developers
Learn how to preserve your UI state across config changes.
Read more >
CloudVisor: Retrofitting Protection of Virtual Machines in Multi ...
A tiny security monitor is introduced underneath the com- modity VMM using nested virtualization and provides protection to the hosted VMs. As a...
Read more >
Safari Technology Preview Release Notes - Apple Developer
Enabled the Reporting API by default (254520@main); Implemented nested Dedicated Workers ... entries were saved into the browser.storage.local storage area.
Read more >
Udacity React Fundamentals - James Priest CV
set an initial value for the iterator - ( let i = 0 ); tell the for loop when it ... element in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found