Question 224192 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to delete persisted redux state from end user's machine

I am using redux-persist to persist redux state which works nice. However, sometimes I face issues because of the way this persistence work, namely via the local storage of the client.

More specifically, let’s say the user interacted with my app, made some selections on the website which I stored and persisted in the redux store. Later on, I find out that there is a bug in the app and the previously persisted state of the user contains this bug, or maybe it does not even contain it, it does not matter. Now, I want to "delete" this persisted state for the user, and kinda start all over.

Note, that I am talking about thousands of users. I want them all to start over when they fresh open the app, or refresh the page. But the issue is that since the state was stored in their local storage, it automatically gets loaded into redux store. The only way I have been trying to solve this is to ask the users to clear their browser’s cache (to get rid of the local storage content), but obviously this is a terrible way of solving the problem.

Now, my question is how to programmatically structure the code or do whatever to be able to "remotely" delete the local storage for some users? Keep in mind, that I don’t want to delete the local storage for those who do not experience issues, so putting a global localStorage.removeItem("key") is not an option.

Maybe what I am trying to achieve is not even possible because that’s just how redux-persist works and end of story?

Tags:

2

Answers


  1. 0

    The easiest way is to rename the "key" prop of a persist config (its just a name for a field for a storage, it won’t affect your reducer). For example – you have a module with a persist config like

    persistReducer({ key: "my-module", …rest });

    And you can change it to

    persistReducer({ key: "my-module-v2", …rest });

    Another option is to use "transform" from redux-persist – it allows you to transform props from storage (but only inner fields, not the full module), OR you can make your own implementation of a storage (it’s easier than you can think) – and it will be like a middleware where you can filter anything you want

    Login or Signup to reply.
  2. 0

    You might be looking for redux-persist‘s migration flow. The basic gist is you version your persisted state and write a function that migrates, e.g. upgrades, the stored state from one version to the next and applies the differences between versions of the persisted state. In other words, you map one version to the next.

    Example:

    Version -1 State

    {
  counter: {
    count: 0,
    badState: "The bad state",
  }
}

    const migrations = {
  // Remove replace state.counter.badState with state.counter.goodState
  // Add state.cart
  0: (state) => {
    const newState = {
      ...state,
      counter: {
        ...state.counter,
        goodState: "This is new good state"
      },
      cart: [],
    };
    delete newState.counter.badState;
    return newState;
  }
};

const rootPersistConfig = {
  key: "root",
  version: 0,
  storage,
  migrate: createMigrate(migrations, { debug: false })
};

    Version 0 State

    {
  counter: {
    count: 0,
    goodState: "This is new good state",
  },
  cart: []
}

    Each time the state changes you’d write a new migration function for that version.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search