redux-persist: purge() doesn't work

@chiaberry I have multiple reducers implemented with a PURGE case as

import { PURGE } from "redux-persist";

const INITIAL_STATE = {
  token: "",
  loading: false,
  user: {}
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case PURGE:
      return INITIAL_STATE;
    }
 };

that way when I call persistor.purge() its actually setting my state back to INITIAL_STATE

This method is applicable for those who use Redux Toolkit. The extraReducers method in each slice should contain:

 builder.addCase(PURGE, () => initialState);

Example

import { PURGE } from "redux-persist";
import { AuthUser } from "../types/user";
import { createSlice } from "@reduxjs/toolkit";

export interface AuthState {
  user: AuthUser | null;
  token: string | null;
}

const initialState: AuthState = {
  user: null,
  token: null,
};

const slice = createSlice({
  name: "auth",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(PURGE, () => initialState); // THIS LINE
  },
});

Purge Usage:

persistor.purge().then(() => /** whatever you want to do **/);

in all seriousness, I think I found the fix. You all want me to submit a PR?

// FiXeD iT
await persistor.purge();
await persistor.purge();
await persistor.purge();
await persistor.purge();
await persistor.purge();
await persistor.purge();
await persistor.purge();

I just did

setTimeout(() => persistor.purge(), 200)

and works great.

I was faced this kind of problem yesterday, and keep finding the solution across Google / Stack Overflow. And below is my solution that works fine now for people who is stilling struggling right now. My problem that I need to get through yesterday is my redux-persist is not working after my rootReducer reset by return rootReducer(undefined, action);. And here is my solution in my LogoutScreen (i.e. in stack navigation), and my store.js no need to change the original code (i.e. return rootReducer(undefined, action);)

const logoutEffect = () => {
    const {error, success} = authState.remotes.logout;
    if (error || success) {
      dispatch(logoutReset());

      persistor.pause();
      persistor.flush().then(() => {
        return persistor.purge();
      });

      // navigation.navigate('Welcome');
      navigation.dispatch(
        CommonActions.reset({
          index: 1,
          routes: [{name: 'Welcome'}],
        }),
      );

      persistor.persist();
    }
  };

credit to @Trashpants for the hint, but for those of my fellow Redux Toolkit fans, you need to add an ‘extraReducer’ on your slice.

import { PURGE } from "redux-persist";

...
extraReducers: (builder) => {
    builder.addCase(PURGE, (state) => {
        customEntityAdapter.removeAll(state);
    });
}

I was having a similar issue, but after I implemented perge() I was still having issues. It turned out to be a race condition where some other action would write to state and trigger persisting data that I expected to be cleared. If a user logged out while an API call was loading, it would cause fun issues. I ended up with:

persistor.purge()
.then(() => {
return persistor.flush()
})
.then(() => {
persistor.pause()
})

@suleymanozev thank you thousand times and more kind sir. Saved me 😃

Lol. Read the docs. It’s a callback, not a promise. Add a timeout and just do the purge after 1 second.

On May 20, 2021, at 21:24, chungmarcoo @.***> wrote:

I was faced this kind of problem yesterday, and keep finding the solution across Google / Stack Overflow. And below is my solution that works fine now for people who is stilling struggling right now. My problem that I need to get through yesterday is that my redex-persist is not working atfer my rootReducer reset by return rootReducer(undefined, action);. And here is my solution in my LogoutScreen (i.e. in stack navigation), and my store.js no need to change the original code (i.e. return rootReducer(undefined, action)😉

` const logoutEffect = () => { const {error, success} = authState.remotes.logout; if (error || success) { dispatch(logoutReset());

persistor.pause(); persistor.flush().then(() => { return persistor.purge(); });

navigation.dispatch( CommonActions.reset({ index: 1, routes: [{name: ‘Welcome’}], }), );

persistor.persist(); } }; `

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

I was confused by this too - not sure if you fixed it by now, but for any people who stumble across this in the future: in order for this to work you have to make sure there is a PURGE action for each reducer that returns your ‘clean’ state. Then your commands of purge(), flush() will clear and force save the changes.

For reference I am coding with react-native (so I assume this is the same for react)

what’s confusing is that if you immediately call purge() after setting up the persistor in store.js it will clear it on boot as expected

import { persistor } from “…/…/…/…/reduxToolkit/store”;

const clearPersistData=()=>{ persistor.pause(); persistor.flush().then(() => { return persistor.purge(); }); }

this worked for me !!! @chungmarcoo thanks for the help

credit to @Trashpants for the hint, but for those of my fellow Redux Toolkit fans, you need to add an ‘extraReducer’ on your slice.

import { PURGE } from "redux-persist";

...
extraReducers: (builder) => {
    builder.addCase(PURGE, (state) => {
        customEntityAdapter.removeAll(state);
    });
}

Whe is the customEntityAdapter importing from?

This example is for those who use react-native. But I’m pretty sure it will work the same for react.

You must reload your application, this is the whole solution. You take the NativeModules from react-native

persistor.purge().then(() => NativeModules.DevSettings.reload());

This works great.

I don’t understand most of the comments. persistore.purge() as it’s clearing localStorage has to be a promise / async. You can await it inside an async function and I’d use a try/catch as well:

export let logout = () => async (dispatch) => {

  try {
    await persistor.purge();
    dispatch(logoutSucceed());
  } catch (err) {
    dispatch(logoutFailed(err));
  }
};

I assume just doing persister.purge() without awaiting or without .then(() => /*do something*/) isn’t gonna work. I guess the documentation could have some more examples.

await persistor.purge();
await persistor.purge();

works for me!

When I run

persistor.purge()
     .then(response => console.log(response))

response comes back as null, is that expected?

And I am getting undefined