Recoil: Current recommended way to persist state?

[xxczaki]

Hi,

First of all, I really enjoy using Recoil - looks like I finally found the best global state management tool for myself :smile:

However, I don't like a couple of things:

• some pages in the documentation are outdated (see "State Persistence");
• the last release was 2 months ago.

I do understand that Recoil is still in the development phase, but some alpha/beta build releases (unstable of course) would be highly appreciated.

---

Now, my question is: what is the current recommended way to persist state? I saw atom effects, but these are not available yet (one of the reasons why unstable releases should be published). The useRecoilTransactionObserver_UNSTABLE hook has changed and does not work as shown on the "State Persistence" page.

Regarding the new behavior - I don't work whether it's possible to save the snapshot to for example the localStorage somehow :confused:

I tried doing something like this to save the state:

useRecoilTransactionObserver_UNSTABLE(({snapshot}) => {
    const unit = snapshot.getLoadable(_unit).contents;
    const language = snapshot.getLoadable(_language).contents;
    const reports = snapshot.getLoadable(_reports).contents;

    localStorage.setItem('state', JSON.stringify({unit, language, reports}));
});

and then load it like so:

<RecoilRoot
    initializeState={({set}) => {
        if (state) {
            set(_unit, state.unit);
            set(_language, state.language);
            set(_reports, state.reports);
        }
    }}
>
    <Component {...pageProps}/>
</RecoilRoot>

This approach, unfortunately, doesn't work - the state gets saved correctly but is not initialized.

[xxczaki]

Resolved.

[drarmstr]

Glad you're enjoying it so far. While we haven't made another experimental release recently, we've been updating master, so you can use that branch if you want the latest.

State Persistence is pending us releasing a URL persistence library package to validate the API before publishing. We had some delays there, but it's still in the works. Feel free to play with the API in master.

[JaosnHsieh]

thanks for the awesome project.

i also had problems with persistent state while following the code on current document.

Ended up working well with below code

function initializeState({ set }) {
  const value = localStorage.getItem(currentUserIDState.key);
  if (value) {
    set(currentUserIDState, JSON.parse(value).value);
  }
}

function PersistenceObserver() {
  useRecoilTransactionObserver_UNSTABLE(({ snapshot }) => {
    const loadable = snapshot.getLoadable(currentUserIDState);
    if (loadable.state === 'hasValue') {
      localStorage.setItem(
        currentUserIDState.key,
        JSON.stringify({ value: loadable.contents }),
      );
    }
  });
}

working repo with mocking api

[mbret]

@xxczaki in case you are interested, here is my solution for persistance

https://gist.github.com/mbret/2aa38e9bfa60d1a13d30f3a8e4f336d3

This is a WIP, it does not currently support:

• dynamic generated atoms
• migration

You can easily add theses features with some changes. I am still working on it so I may update the gist with theses use case. That being said, I am not trying to make a 100% perfect solution since I am waiting for the final API and this entire code could be obsolete at any time. It just work for me currently.

[drarmstr]

See this updated guide for persistence until the persistence library project is restarted and published.

[hellosmithy]

@drarmstr any updates on the URL persistence library? This would be really useful even if still quite alpha.

[drarmstr]

@drarmstr any updates on the URL persistence library? This would be really useful even if still quite alpha.

cc @bezi