Automatically call an API endpoint (selector) when an atom has changed

[arunmmanoharan]

Hi, I am implementing auto-save where an API should be called everytime the atom is updated. The API endpoint is inside a selector.

export const saveSourceDetails = selector({
  key: 'saveSourceDetails',
  get: async ({ get }) => {
    const saveSourceDetailsState = get(sourceDetailsState);
    const result = await post(SOURCE_DETAILS_SAVE, saveSourceDetailsState);
    return result;
  },
});

The atom is

export const sourceDetailsState = atom<ISourceConfigurationEdit>({
  key: 'getSourceDetailsState',
  default: {} as ISourceConfigurationEdit,
});

Please advice. I see that useRecoilTransaction might be able to solve it, but the documentation says its only for updating atoms for now.

[BenjaBobs]

You should use Atom Effects for that. https://recoiljs.org/docs/guides/atom-effects

[arunmmanoharan]

@BenjaBobs Thanks man. It worked. How do I update a different atom inside effects?

[BenjaBobs]

I don't think there's currently a way to set the value of another atom from the first atom's effect. @drarmstr can you comment on this? I think I've seen this come up a lot.

[njarraud]

I started to use the effects as well which are pretty handy. However having the ability to set other atoms inside would be a great addition.

[drarmstr]

Updating other atoms from an effect can allow more opportunities for complex cycles and make it easier to introduce bugs so we are hesitant to introduce it so far. Normal React useEffect() can always be used to monitor and update multiple atoms.