Redux-persist: Persistor.purge() doesn't clean all data

Created on 19 Mar 2018 · 7Comments · Source: rt2zz/redux-persist

What I want to achieve

When my app crashes, I want to clear the data persisted in storage, thus when user re-open the application, which will trigger the Rehydrate, will update the redux store to be default values and the user can continue to use the app ( avoiding the error component, of course )

Problem

So I put persistor.purge() in the ErrorUtils.globalHandler of React Native, but when the Rehydrate happens, the data passed along the redux action still has the old data before crashing

Workaround tested

I tried to use redux-reset right after the persistor.purge() and now the Rehydrates only passes the default values.

Question

The question is that: What does the persistor.purge() then ?

Source

williamliangwl

Most helpful comment

@ronnierios to reset all my redux states, I simply use the redux-reset here.

Actually I am still new in React Native and Redux, so I don't really understand what the following code does

const rootReducer = (state, action) => {
  console.log("STATE", state)
  if (action.type === 'RESET') {
    state = undefined
  }

  return appReducer(state, action)
}

However, I think if we just want to reset all redux states to its initial state, we can simply use the redux-reset.

If we only want to reset some of them, then may be it's better to implement the reset in each reducers, by "listening" to the same action.type. Another way to do this, you can also use the redux-reset, but on those reducers that don't want to be reset, just return the current state.

williamliangwl on 12 Apr 2018

👍2

All 7 comments

After doing some tests and check, I found the following:

the purge() seems really not clearing any data, even at the storage itself.

I am using AsyncStorage and the way I check the data is following the guide here

So after a crash happens, I am sure that the purge() is called as I log something in the callback of it ( I am trying to purge 3 keys, it returns 3 nulls in callback ).
However, when I check the AsyncStorage, the content of the storage is still the same. If I try to execute AsyncStorage.clear(), then all keys are deleted and the storage is indeed empty.

Is it a problem of using the AsyncStorage ? I haven't test with other storage type and only tested in Android device

williamliangwl on 20 Mar 2018

I finally found out the problem!

To make things simple, let's make some assumptions:

The redux state has several keys: auth and nav
There exists a component with its componentWillUnmount is to dispatch change on the nav state
There also exists a global error handler which will purge all keys in the AsyncStorage

When an error happens, the order of call is:

componentWillUnmount
global error handler

Since both calls above will trigger promise / async actions, we cannot make sure who will finish first. However, most of the time, the purge will finish first, while the nav state change second.

This scenario will lead to:

Before error -> The redux state is { auth: "something", nav: "something" }. Same value exists in the Async storage
On error -> the purge finishes first -> The redux state remains the same as no 1, but Async storage is empty
On error -> the nav state change finishes -> The redux state becomes { auth: "something", nav: "" }. Then this change will write to the AsyncStorage again.

That's why it creates "illusion" that the purge is not working ( for auth key ).

To handle this situation, just need to reset the redux state in the global error handler.
Sorry for the confusion in this issue, this can be closed now :)

williamliangwl on 21 Mar 2018

@williamliangwl I have the same problem. I try to reset my state from a custom action, but only works for some reducers.

const appReducer = combineReducers({
  plans,
  contracts,
  user,
  appState
})

const rootReducer = (state, action) => {
  console.log("STATE", state)
  if (action.type === 'RESET') {
    state = undefined
  }

  return appReducer(state, action)
}

export default rootReducer

I also tried to reset the state passing the default values, without exit

//Action
export const clearPlans = function () {
        return {
            type: CLEAR_PLANS,
            payload: []
        }
}

//Reducer
const initialState = {
  plans: [],
  persistExpiresAt: DATA_EXPIRES_AT,
};

const plans = (state = initialState, action) => {
    switch(action.type) {
        case FETCH_PLANS:
            console.log(action.payload)
            return {...state,
              plans: action.payload
            }
        case CLEAR_PLANS:
            console.log(action.payload)
            return {...state,
              plans: action.payload
            }
        default:
            return state
    }
}

How did you handle the redux state? Thank you in advance

ronnierios on 11 Apr 2018

@ronnierios to reset all my redux states, I simply use the redux-reset here.

Actually I am still new in React Native and Redux, so I don't really understand what the following code does

const rootReducer = (state, action) => {
  console.log("STATE", state)
  if (action.type === 'RESET') {
    state = undefined
  }

  return appReducer(state, action)
}

However, I think if we just want to reset all redux states to its initial state, we can simply use the redux-reset.

williamliangwl on 12 Apr 2018

👍2

Ran into the same issue. The solution suggested here is to wipe your own state and have redux-persist persist the wiped state, which means this is a workaround as it doesnt require you to call persistor.purge at all.