atomFamilyWithStorage

[Cpt-Falcon]

Hey,

An idea that would be quite helpful for Jotai and give it a useful recoil feature would be an atomFamilyWithStorage. The atomFamilyWithStorage like with atomWithStorage would take in an identifier like 'dark mode', but it would also take in a unique identifier as well corresponding to each new atom in the family. Like a guid or an int id, whatever. Then, upon initialization in the atom family, the atom family would call a localStorageInitialization function. There it would look for the standard identifier like dark mode. It would scan through all local storage keys, looking if the string contained that dark mode identifier. If it does, we split the key string based on some kind of delimitator like a period. We would also take in a "onInitLoad" function from the user, the purpose being to parse and return the atom configured the way they want. The input to the atom would be the unique identifier as well as the content from local storage, and then would be expected to return their atom.

I was going to try and implement this myself unless it already exists

[dai-shi]

I'm not exactly sure how it's different from atomWithStorage and atomFamily (or custom one) combination, but please feel free to give a try.

[mikeyzhong]

I've been having a world of trouble getting this to implement.

I have something

export const blueprintsAtomFamily = atomFamily(
  ({ id, blueprint }: BlueprintAndId) => {
    return atomWithStorage<Blueprint>(`blueprint-${id}`, blueprint);
  },
  (a, b) => a.id === b.id
);

It seems as though the atom is retrieved but it's not persisting in localStorage. Other examples of atomWithStorage without atomFamily wrapped around it work great on my end. Was wondering if someone here could shed some insight into what's going on or had a working example of atomFamily + atomWithStorage.

Thanks!

[dai-shi]

The code looks good though. You might want to provide a minimal repro to get a help from someone.

[mikeyzhong]

Thank you for the blazing fast response! I did some further digging and I think it may have something to do with this discussion #2121, where state is not persisted in localStorage if the atom is never updated. Is there an easy way to create a dummy value for atomWithStorage<Blueprint>(`blueprint-${id}` , blueprint); so that the above line would cause an update instead of an initial state?

[dai-shi]

I'm not sure what you feel "easy", but useEffect should be one good option for this purpose.

[mikeyzhong]

Thanks!