Redux-persist: How would you implement a UI button that does a redux-persist purge?

[ericlau-solid]

I noticed that purge is a function of redux-persist store, but how would I invoke it in a typical UI button, where I don't get access to store, only dispatch. I see this as a potential solution: http://stackoverflow.com/questions/33643290/how-do-i-get-a-hold-of-the-store-dispatch-in-react-router-onenter

would you do that, despite comments saying you shouldn't?

[rt2zz]

You can do this a few different ways. Basically the crux is you need to get a handle on the persistor object that is returned by persistStore. If this UI button lives deep inside your app, you will either need to
1) expose persistor via context similar to how react-redux Provider works
2) pass the persistor down via props
3) create persistor as a singleton which can be required in your other components.

Can you explain more about your use case? purge clears the local storage but does not reset state. I suspect what you actually are looking for is an action that resets state to initialState. To do this I would not worry about the persistor at all, and instead create your own action called "RESET_STATE" which each reducer is responsible for implementing.

Let me know if any of those work for you.

[ericlau-solid]

Thanks for the quick reply - there are 2 use cases:

• one is for production. Say I have version 1.2 on PROD, and I want to deploy 1.3. Version 1.3 has some state-shape changes which make it incompatible with 1.2. How do I go about clearing out local storage redux state data that is incompatible, and ensure a smooth experience when user hits the site (at 1.3), with a local storage state which is fine in 1.2, but not 1.3.
• one is for development -- we often find ourselves needing a quick button to clear out local storage. We have a workaround where we simply clear the localStorage itself (not using purge), and trigger a location.reload(). --- this is also useful in case there's a bug with the last use case and end-user needs a way to clear all the local storage and refresh.

[rt2zz]

Got it. I do not have a good solution to number 1. Generally I write custom code to handle this kind of situation on a per reducer basis and store version string on my "app" reducer. But I do not feel this is an ideal solution and am curious what other strategies might ease migrations.

As for 2, you might consider sending the persistor down via context. Again it is not something I have done, and I am curious to hear how it works out for you. Good luck!

[pke]

As for resetting the state to initial, isn't there a standard redux way to do that? After all, redux does get a fresh state on app start, by sending an internal INIT action to the store, which results in a call to reducers with state set to undefined. That causes all reducers to send back their initial state.

See here: http://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store/35641992#35641992

[rt2zz]

After using redux more, my recommendation for getting access to purge is to expose the persistor via context. Then you can call this.context.persistor.purgeAll from anywhere in your application.

The behavior of purge is to clear the storage but not reset state, so a page reload or a RESET action will still be required.

There are other approaches possible such as a custom action creator that has the persistor in scope.

If changes are needed in the redux-persist lib to support specific use cases let me know and we can evaluate feature additions.

[rt2zz]

note for posterity there is now a purgeStoredState top level export that can help purge state without having access to the persistor. Resetting redux state is still out of scope of this module, but IIRC there are a couple of other packages that solve that very problem.

[lucianomlima]

@rt2zz in V4 with purgeStoredState is possible to select store to purge or in a deep way, a data to be purged in a store?

[Sphinxs]

@lucianomlima , it probably can be done with PURGE. Have you cleared your store, please share how did you do this.