How do I know when persist finishes saving changes?

[shoeman22]

On my logout flow, I want to clear the state so I have my model setup like:

persist({
  session: {
    authenticationToken: null,
    login: action((state, payload) => {
     state.authenticationToken = payload.authenticationToken
    }),
    logout: action((state, payload) => {
      state.authenticationToken = null
    })
})

Then in my app I do something like:

const App = () => {
  const logoutAction = useStoreActions(actions => actions.session.logout)

  const doLogout = () => {
     logoutAction()
     window.location = '/login'
  }

  return <button onClick={doLogout} />Logout</button>
}

I think I need some way to wait for the persist action to complete before I do my redirect because I don't think it's getting saved into sessionStorage (I still see authentication token in my store after I redirect).

Is there a good way to accomplish this?

[ctrlplusb]

Hey @shoeman22,

Yep, there is actually an undocumented API for this case. This was an oversight and likely I need to drop in the TypeScript definitions too.

Try doing the following prior to a redirect:

await store.persist.flush();
window.location.href = "http://winning.com";

👍

[ctrlplusb]

You can use the useStore hook to get a handle on the store. 👍

[ctrlplusb]

FYI @shoeman22

This doesn't actually work as expected. No promise is returned. But I will extend the API to do so. I'll also add typing information and documentation on them. 👍

[ctrlplusb]

@shoeman22 the latest alpha of 3.4.0 now includes these APIs in terms of documentation and TypeScript typing. I have also added a test case to ensure that the store.persist.flush() API works as expected.

I would appreciate it if you could try it out and feedback.

Details of the alpha are on #459