[Tips] How to persist a value with localStorage/AsyncStorage

It’s not supported by the lib itself, but here’s an idea how to persist data.

const strAtom = atom(localStorage.getItem('myKey') ?? 'foo')

const strAtomWithPersistence = atom(
  get => get(strAtom),
  (get, set, newStr) => {
    set(strAtom, newStr)
    localStorage.setItem('myKey', newStr)
  },
)

or

const strAtom = atom('foo')

const persistStrAtom = atom(
  null,
  (get, set, action) => {
    if (action.type === 'init') {
      const str = localStorage.getItem('myKey')
      if (str !== null) {
        set(strAtom, str)
      }
    } else if (action.type === 'set') {
      set(strAtom, action.str)
      localStorage.setItem('myKey', str)
    }
  },
)

[dai-shi]

Agreed. We’d eventually move them to readme or a upcoming website.

[Maadtin]

It’s not supported by the lib itself, but here’s an idea how to persist data.

const strAtom = atom(localStorage.getItem('myKey') ?? 'foo')

const strAtomWithPersistence = atom(
  get => get(strAtom),
  (get, set, newStr) => {
    set(strAtom, newStr)
    localStorage.setItem('myKey', newStr)
  },
)

or

const strAtom = atom('foo')

const persistStrAtom = atom(
  null,
  (get, set, action) => {
    if (action.type === 'init') {
      const str = localStorage.getItem('myKey')
      if (str !== null) {
        set(strAtom, str)
      }
    } else if (action.type === 'set') {
      set(strAtom, action.str)
      localStorage.setItem('myKey', str)
    }
  },
)

Can you just asign the atom to itself instead of creating 2 different atoms? Is that “correct” ? thanks 😃

for example smth like this:

const langAtom = atom('es', (get, set, newLang) => {
    localStorage.setItem('lang', newLang);
    set(langAtom, newLang);
})