Subscribing effects to state

I’m wondering if there’s plans to allow functionality such as subscribing effects to state. Let me be a bit more specific in what I mean - I’m trying to store a certain atom’s value to localstorage, and right now the best solution I’ve come up with is this:

Declaring my atom like so:

const myState = atom({
  key: 'myState',
  default: JSON.parse(window.localStorage.getItem('myState')) || myDefaultValue,
});

And writing this in my root component:

const myStateValue = useRecoilValue(myState);
useEffect(() => {
  window.localStorage.setItem('myState', JSON.stringify(myStateValue));
}, [myStateValue]);

But it would be really nice if we could specify some kind of subscribed function somewhere that just runs the localstorage setter on value change, so we don’t have to rely on the render of the root component. As an example API:

const myState = atom({
  key: 'myState',
  default: JSON.parse(window.localStorage.getItem('myState')) || myDefaultValue,
  subscriber: value => window.localStorage.setItem('myState', JSON.stringify(value)),
});

If this functionality already exists and I’m just missing it, please feel free to point it out and close the issue. Otherwise I’d love to hear the team’s thoughts on such functionality!

[drarmstr]

There is a useTransactionObservation_UNSTABLE hook you can use to subscribe to state changes for managing persistence. There is also a persistence_UNSTABLE option for atoms to add metadata, such as a validator function. It’s listed as _UNSTABLE as we’re still finalizing the API, but we use this internally. We’re working now to clean up this API and publish an example persistence library.

[drarmstr]

@Qrysto @Joonpark13 - Yup, stay tuned for “Atom Effects” coming soon…