How can I clear the saved state?

kevando commented

2016-02-24 03:05:58 +00:00

(Migrated from github.com)

This is an awesome solution for me, thanks!

I am using this with react-native and I'm wondering how to clear the state so i can start fresh if i mess something up in the state tree

This is an awesome solution for me, thanks! I am using this with react-native and I'm wondering how to clear the state so i can start fresh if i mess something up in the state tree

michaelcontento commented

2016-02-25 11:37:28 +00:00

(Migrated from github.com)

Uhm .. well .. this depends on the storage you're using. With the release of v3.0.0 we moved all engines into own npm packages and redux-storage has become only the orchestration layer. And until now all engines only implements save(sate) and load() => state.

With this in mind: there is no "official solution" to clear the state.

But you can easily trigger engine.save({}) on your own. This saves a empty state (in the end the same effect) and is already supported by every engine. Just trigger this before the actual load(store) and you should be fine :)

Does this solve your problem at hand?

Uhm .. well .. this depends on the storage you're using. With the release of [v3.0.0](https://github.com/michaelcontento/redux-storage/releases/tag/3.0.0) we moved all engines into own npm packages and redux-storage has become only the orchestration layer. And until now all engines only implements `save(sate)` and `load() => state`. With this in mind: there is no "official solution" to clear the state. But you can easily trigger `engine.save({})` on your own. This saves a empty state (in the end the same effect) and is already supported by every engine. Just trigger this before the actual `load(store)` and you should be fine :) Does this solve your problem at hand?

kevando commented

2016-02-26 23:55:02 +00:00

(Migrated from github.com)

I am using the asyncStorage and this worked, thanks!

I am a pretty huge n00b, so this next question is probly way outside the scope, but should I worry about local asyncStorage data left behind here? Like what if I have 100kb stored in the state and I keep clearing it. Does that vampire data persist? I'm used to mySQL or mongodb where I have a data viewer, but there's no data viewer for asyncStorage.

I am using the asyncStorage and this worked, thanks! I am a pretty huge n00b, so this next question is probly way outside the scope, but should I worry about local asyncStorage data left behind here? Like what if I have 100kb stored in the state and I keep clearing it. Does that vampire data persist? I'm used to mySQL or mongodb where I have a data viewer, but there's no data viewer for asyncStorage.

😆 1

michaelcontento commented

2016-02-29 09:12:16 +00:00

(Migrated from github.com)

It depends on the engine how easy it is to manually inspect the currently stored record. But for reactNativeAsyncStorage it is as simple as AsyncStorage.getItem(KEY). So go and inspect the AsyncStorage object on your own! 😄

In the current implementation reactNativeAsyncStorage always writes via setItem to the same key. So there should be no old garbage left behind - regardless how often you flush the store with engine.save({}). Although I haven't looked deep at the source of AsyncStorage to be 100% sure - but I assume that AsyncStorage has been built with caution :)

It depends on the engine how easy it is to manually inspect the currently stored record. But for `reactNativeAsyncStorage` it is as simple as [AsyncStorage.getItem(KEY)](https://github.com/michaelcontento/redux-storage-engine-reactnativeasyncstorage/blob/master/src/index.js#L5). So go and inspect the [AsyncStorage](https://facebook.github.io/react-native/docs/asyncstorage.html) object on your own! :smile: In the current implementation `reactNativeAsyncStorage` always writes via `setItem` to the same key. So there should be no old garbage left behind - regardless how often you flush the store with `engine.save({})`. Although I haven't looked deep at the source of `AsyncStorage` to be 100% sure - but I assume that `AsyncStorage` has been built with caution :)

danielwong2268 commented

2016-03-22 23:12:16 +00:00

(Migrated from github.com)

I'm having an issue with engine.save({}) clearing the state. In my app, on a log out, I call engine.save({}), but a LOCATION_CHANGE action is also dispatched, since the user is re-routed to another page (I'm using react-router/react-redux-router). Somehow, the state is not reset. Any ideas on what might be wrong?

danielwong2268 commented

2016-03-22 23:15:42 +00:00

(Migrated from github.com)

I also experimented with using localStorage.clear() to try to destroy the saved state, but that doesn't seem to work either.

michaelcontento commented

2016-03-25 08:27:54 +00:00

(Migrated from github.com)

Hi @danielwong2268,

both engine.save({}) and localStorage.clear() should clear the saved data. But remember that a manual localStorage.clear() is a bypass to the whole redux/redux-storage stack! It will clear the underlying storage but not the current state tree inside your app! So as soon as a new action will trigger a save operation, the whole stack is written back to localStorage.

What are you trying to do here anyways? Removing user related informations on a logout? In this case, just follow the usual redux workflow [1] and redux-storage will keep your state properly synced. Or to put it in other words: A manual engine.save({}) or manipulation on the underlying storage system (e.g. localStorage.clear()) is a potential dangerous anti-pattern and should be avoided as long as possible!

I hope this is enough information to solve your issue! If not, please describe your problem with more details (maybe post some code as gist?) and I'll do my best to help you out.

[1] Dispatch a proper action, handle it in all required reducers and your done 😄

Hi @danielwong2268, both `engine.save({})` and `localStorage.clear()` should clear the saved data. But remember that a manual `localStorage.clear()` is a bypass to the whole redux/redux-storage stack! It will clear the underlying storage **but not** the current state tree inside your app! So as soon as a new action will trigger a save operation, the whole stack is written back to localStorage. What are you trying to do here anyways? Removing user related informations on a logout? In this case, just follow the usual redux workflow [1] and redux-storage will keep your state properly synced. Or to put it in other words: A manual `engine.save({})` or manipulation on the underlying storage system (e.g. `localStorage.clear()`) is a **potential dangerous anti-pattern** and should be avoided as long as possible! I hope this is enough information to solve your issue! If not, please describe your problem with more details (maybe post some code as [gist](https://gist.github.com)?) and I'll do my best to help you out. [1] Dispatch a proper action, handle it in all required reducers and your done :smile:

danielwong2268 commented

2016-03-25 17:08:10 +00:00

(Migrated from github.com)

Thanks for the response @michaelcontento. Here's a sample of my code:

/*************** store.js  ******************/
// import ...
const reducer = storage.reducer(reducers);
const engine = createEngine('my-save-key');
const storageMiddleware = storage.createMiddleware(engine, []);
const logger = createLogger({collapsed: true})
const createStoreWithMiddleware = applyMiddleware(thunk, storageMiddleware, logger)(createStore)

const store = createStoreWithMiddleware(reducer);
const history = syncHistoryWithStore(browserHistory, store);

export {store, history, engine}
/*************** navcontainer.js ****************/
import { engine } form '../store'

const mapStateToProps = (state) => {
  return {
    isAuth: state.auth.isAuthenticated,
    username: state.user.username
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onLogoutClick: () => {
      engine.save({})
      .then( () => {
        type: 'LOGOUT'
      })
    }
  }
}
const container = connect(mapStateToProps, mapDispatchToProps)(Nav);

export default container

Above, I have a container for a presentational component on which a logout button exists, which triggers OnLogoutClick. The logout button also directs the user back to the home page (react-router), and dispatches a LOCATION_CHANGE action.
I expect engine.save({}) to clear my state, then fire off a logout dispatch when it's done.
Interestingly, I don't see an action dispatched by doing engine.save({}), and I'm not sure if there should be one. So in total, two actions are dispatched on logout.
However, I check my state after the logout action is dispatched and it is not cleared. Also, I check my localStorage in the console, and 'my-save-key' is not an empty object.

I suppose I could dispatch the logout action, and have all reducers listening for that action and resetting the state, but that sounds like a lot of code. And ideas?

Thanks for the response @michaelcontento. Here's a sample of my code: ``` /*************** store.js ******************/ // import ... const reducer = storage.reducer(reducers); const engine = createEngine('my-save-key'); const storageMiddleware = storage.createMiddleware(engine, []); const logger = createLogger({collapsed: true}) const createStoreWithMiddleware = applyMiddleware(thunk, storageMiddleware, logger)(createStore) const store = createStoreWithMiddleware(reducer); const history = syncHistoryWithStore(browserHistory, store); export {store, history, engine} /*************** navcontainer.js ****************/ import { engine } form '../store' const mapStateToProps = (state) => { return { isAuth: state.auth.isAuthenticated, username: state.user.username } } const mapDispatchToProps = (dispatch) => { return { onLogoutClick: () => { engine.save({}) .then( () => { type: 'LOGOUT' }) } } } const container = connect(mapStateToProps, mapDispatchToProps)(Nav); export default container ``` Above, I have a container for a presentational component on which a logout button exists, which triggers OnLogoutClick. The logout button also directs the user back to the home page (react-router), and dispatches a LOCATION_CHANGE action. I expect engine.save({}) to clear my state, then fire off a logout dispatch when it's done. Interestingly, I don't see an action dispatched by doing engine.save({}), and I'm not sure if there should be one. So in total, two actions are dispatched on logout. However, I check my state after the logout action is dispatched and it is not cleared. Also, I check my localStorage in the console, and 'my-save-key' is not an empty object. I suppose I could dispatch the logout action, and have all reducers listening for that action and resetting the state, but that sounds like a lot of code. And ideas?

michaelcontento commented

2016-04-28 08:10:41 +00:00

(Migrated from github.com)

With engine.save your calling the underlying engine which is only responsible to talk with the storage engine (see load). So it's totally fine that you don't see any SAVE action, as this is one of the management jobs of redux-storage. Bypassing redux-storage and .. well .. it no longer does anything 😄

As already mentioned above, working with the underlying engine is a dangerous anti-pattern!

The best solution would be to craft your app without redux-storage in mind. Plain old react with redux as flux layer. How would one handle a logout there? Simply pass a LOGOUT action to the system and clear the state in all reducers that previously collected/stored user related informations. After this action has passed the system your state should be cleared. redux-storage will now automatically detect this change and pass it to the configured engine. No need to manually mess around with redux-storage or even the engine.

In the best case you don't realize that redux-storage is working at all! Configure it properly (which engine should be used? can we use the filter decorator to only save a partial state tree? or even the debounce decorator to save some CPU? ...) and your done.

With `engine.save` your calling the underlying engine which is only responsible to talk with the storage engine (see [load](https://github.com/michaelcontento/redux-storage-engine-localstorage/blob/master/src/index.js#L13-L18)). So it's totally fine that you don't see any `SAVE` action, as this is one of the management jobs of redux-storage. Bypassing redux-storage and .. well .. it no longer does anything 😄 As already mentioned above, working with the underlying engine is **a dangerous anti-pattern**! The best solution would be to craft your app without redux-storage in mind. Plain old react with redux as flux layer. How would one handle a logout there? Simply pass a `LOGOUT` action to the system and clear the state in all reducers that previously collected/stored user related informations. After this action has passed the system your state should be cleared. redux-storage will now automatically detect this change and pass it to the configured engine. No need to manually mess around with redux-storage or even the engine. In the best case you don't realize that redux-storage is working at all! Configure it properly (which engine should be used? can we use the filter decorator to only save a partial state tree? or even the debounce decorator to save some CPU? ...) and your done.

Rows
Columns

How can I clear the saved state? #99