I want to separate functions like set and get states from code

[nabezokodaikon]

I want to separate functions like set and get states from code.
Regarding the set, I was able to do the following, but the acquisition will be the type.
Is there any good way?

import {
  atom,
  useRecoilCallback,
} from "recoil"
import { RecoilAtomKeys  } from "../define/RecoilKeys";
import { CityId } from "../model/cityId";
import { selectedCityIdState } from "../state/selectedCityIdState";

const selectedCityIdState = atom<CityId | undefined> ({
  key: RecoilAtomKeys.SELECTED_CITY_ID_STATE,
  default: undefined,
});

// Setter
export const setSelectedCityId = () => useRecoilCallback(({set}) => (cityId: CityId) => {
  set(selectedCityIdState, cityId);
});

// Getter
export const getSelectedCityId = () => useRecoilCallback(({snapshot}) => () => {
  const cityId = snapshot.getLoadable(selectedCityIdState).contents;
  return cityId; // <- Type is any
});

[nabezokodaikon]

Can do selector.

import {
  selector,
} from "recoil"
import { RecoilSelectorKeys } from "../define/RecoilKeys";
import { CityId } from "../model/cityId";
import { selectedCityIdState } from "../state/selectedCityIdState";

export const getSelectedCityIdSelector = selector<CityId>({
  key: RecoilSelectorKeys.SELECTED_CITY_ID_SELECTOR,
  get: ({get}) => {
    const cityId = get(selectedCityIdState);
    return cityId;
  }
});

export const getSelectedCityId = () => useRecoilValue(getSelectedCityIdSelector);

thank you.

[drarmstr]

As this selector doesn't transform the input in any way, it doesn't really add any value over just using selectedCityIdState directly.

Also note that useRecoilValue() is a hook and should follow the React rules for calling hooks, meaning they should only be called by React component render functions or other hooks. So, getSelectedCityId() should really be called useSelectedCityId() and also only be called by render functions or other hooks.

[drarmstr]

For a typesafe getter hook you need to also refine based on the state property or use a Loadable convenience accessor such as getValue(), valueMaybe(), or valueOrThrow() depending on the behaviour you want.

// Getter
export const getSelectedCityId = () => useRecoilCallback(({snapshot}) => () => {
  const cityId = snapshot.getLoadable(selectedCityIdState).getValue();
  return cityId;
});

But, an important note about using useRecoilCallback() in this way is that it will not subscribe the component to re-render if the selected city ID state changes. The idomatic approach to get the type-safe value of some state while subscribing for changes is just simply:

  useRecoilValue(selectedCityIdState);

[nabezokodaikon]

Thank you for your reply.
After all, it's a simple method.