Atom boilerplate/patterns when needing a custom setter

[chrisdhanaraj]

Hey there! Thanks for the library, it's been a snap to get productive with it quickly. I wanted to raise one of my confusion points that I've run into a few times, and that's with a custom updater. The various different atoms + documentation for those atoms seem to sporadically allow for a custom setter, but sometimes not.

For example, the focusAtom doesn't seem to allow for you to pass a Setter function, but I'm not entirely sure why. Similarly, the atomWithImmer doesn't allow it, but you could create a base atomWithImmer and then create your own derived atom's with custom setters.

I guess my question is - is that the intended pattern of use? i.e., setup a base atom with focusAtom/atomWithImmer/etc, and then create another atom with the sole purpose of setting the updater function? Something like

import { atom } from 'jotai';
import { atomWithImmer } from 'jotai/immer';

const baseAtom = atomWithImmer({
  name: 'Something',
  favouriteThings: {
    movies: ['Stranger Things'],
    books: ['The Fifth Season']
  },
  bio: {
    age: 12,
    firstName: "Chris"
    foodPreferences: "everything"
  }
})

const bioAtom = atom(
  (get) => get(baseAtom).bio,
  (get, set, update) => {
     ... CUSTOM UPDATER THINGS
  })

The same could be extrapolated for focusAtom, but the problem is that it adds an additional atom which feels a little boilerplate-y and could've been resolved by allowing to pass a custom update function in.

import { atom } from 'jotai';
import { atomWithImmer } from 'jotai/immer';

const baseAtom = atomWithImmer({
  name: 'Something',
  favouriteThings: {
    movies: ['Stranger Things'],
    books: ['The Fifth Season']
  },
  bio: {
    age: 12,
    firstName: "Chris"
    foodPreferences: "everything"
  }
})

const bioAtomBase = focusAtom(baseAtom, optic => optic.prop('bio');

const bioAtom = atom(
  (get) => get(ageAtom),
  (get, set, update) => {
     ... CUSTOM UPDATER THINGS
  })

[dai-shi]

Thanks for your feedback and raising the discusson.

is that the intended pattern of use?

Yes.

atomWithFoo is to create a primitive atom, and it means the update function is the default one.

the problem is that it adds an additional atom which feels a little boilerplate-y

We prefer atom composition style to avoid repetition.

I wonder how you would like to use atomWithImmerWithCustomUpdate, because I wonder if I could create such a helper function. So the question is, what is CUSTOM UPDATER THINGS as a concrete example?

[chrisdhanaraj]

Hello! Yes - so I'm almost always defining a reducer style for my update functions. So what I'm trying to end up always is with a

atom(get => ..., (_, set, action) => {
  set(atomBase, draftState => {
    if (action.type === 'INCREMENT') ...
  })
})

The objects I'm passing around are complex, so when I focus on a particular piece, I try to move the business logic into the updater function versus the call-site

[dai-shi]

It sounds like withReducer util might help.

const withReducer = (baseAtom, reducer) => atom(
  (get) => get(baseAtom),
  (get, set, action) => set(baseAtom, reducer(get(baseAtom), action)
)

It could be used with atomWithImmer.

const fooAtom = withReducer(atomWithImmer({ count: 0 }), (_, action) => draftState => {
  if (action.type === 'INCREMENT') {
    ++draftState.count
  }
})