Persist updates slow

Hi @ctrlplusb

First of all. Great job on this lib, i love it!

We run into an issue where persist is updating slowly (approx 2 sec delay). Even on simple/small persisted models.

For example i have this simple model

export const mainMenuModel = {
  isOpen: true,
  toggle: action((state, payload) => {
    state.isOpen = !state.isOpen
  }),
}

const storeModel = {
  mainMenu: persist(mainMenuModel),
}

export const store = createStore(storeModel)

When toggling the menu it takes approx 2 sec to update the local/session storage.

The main issue is where we log out and refresh immediately or refresh 1 second after logging out we got logged back in because it did not update the local-storage on time.

I can get around this by setting the localStorage directly from my model

export const userModel = {
  ...initialState,
  logout: action((state, payload) => {
    localStorage.setItem('[StoreKey]@user.isLoggedIn', false)
    localStorage.setItem('[StoreKey]@user.token', '')
    
    state.isLoggedIn = false
    state.token = ''
  }),
}

But this seems not to be a solution in the long run.

Is this a know issue or is this expected behavior?

i’m using version 3.3.0

Thank you

[ctrlplusb]

Hi @julianklumpers 👋

Glad to hear you are enjoying the lib. 😊

This is a similar problem as is described in #454

There are some API’s which I have both improved and documented within the 3.4.0 alpha, which is available via #459

What is happening is that we debounce the attempts to persist state, currently at an arbitrary 1000ms debounce setting (I plan to make this configurable via a further update in the 3.4.0 release).

So what you need to do prior to refreshing the page is to flush any outstanding calls in the persist layer. You can do so via the API that is attached to your store instance.

For example:

import { useStore, useStoreActions } from 'easy-peasy';

function LogoutButton() {
  const store = useStore();
  const logout = useStoreActions(actions => actions.session.logout);

  const performLogout = async () => {
    logout();
    await store.persist.flush();
    window.location.href = 'http://foo';
  };

  return <button onClick={performLogout}>Logout</button>;
}

[ctrlplusb]

@julianklumpers I’ve just re-read your comment. I think you need to have the same flush logic after you login and before you refresh the page. Basically any time you refresh the page or navigate out of the site/app you should run a flush to be absolutely sure your state is persisted. I’ll update the docs accordingly with this information, making it more explicit and with some examples.