[Tips] Updating atom object property

Atoms can hold any primitive values, including objects. Here’s an example to updating a property of an object.

const funkyPigAtom = atom({ funkyPig: { glasses: 'stylish', bling: 'golden' }})

const Component = () => {
  const [funkyPig, setFunkyPig] = useAtom(funkyPigAtom)
  const updateBling = (bling) => {
    setFunkcyPig((prev) => ({ ...prev, funkyPig: { ...prev.funkyPig, bling } }))
  }
  // ...
}

We could also create an update action atom.

const funkyPigAtom = atom({ funkyPig: { glasses: 'stylish', bling: 'golden' }})
const updateBling = atom(
  null,
  (get, set, bling) => {
    const prev = get(funkyPigAtom)
    set(funkyPigAtom, { ...prev, funkyPig: { ...prev.funkyPig, bling } })
  }
)

[NorweskiDrwal]

Ooooh, you guys are the best! I am learning about Observer Patterns in JS and wanted to write a state management lib using OP for giggles, so I found this, which led me here (and to Recoil) and now I’m just writing a handlers layer on top of Jotai to learn how stuff works. @dai-shi thanks a lot for doing all this 😉

[antipalindrome]

@dai-shi You’re way ahead of me, thanks! 😃 Maybe I should spend more time looking through all these issue!