Redux-persist keeps on loading

I'd like to keep user information on page refresh/redirect, but also I want to clear it after logout action.

const rootReducer = combineReducers(productsReducer, auth: accessReducer, usersReducer);

const persistConfig =
key: 'root',
storage,
whitelist: ['auth']
;


I want to persist data only in accessReducer that's why it's whitelisted. Now I want to handle logout in such way that all data in reset. To do so I've created logoutReducer:

accessReducer

export const logout = () => (
type: 'USER_LOGOUT'
);

const logoutReducer = (state, action) =>
if(action.type = 'USER_LOGOUT')
state = undefined;


return rootReducer(state, action);
;


const persistedReducer = persistReducer(persistConfig, logoutReducer);
export const store = createStore(persistedReducer, applyMiddleware(thunk));
export const persistor = persistStore(store);


Once I run the application, I get loading information which comes from a <Loader/> in PersistGate:

<Loader/>

PersistGate

<Provider store=store>
<PersistGate loading=<Loader/> persistor=persistor>
...
</PersistGate>
</Provider>


Now I guess it's because I pass logoutReducer which has only reference to other reducers and that's why configuration fails. How do I persist user information and keep that logout-clear-store trick? Is there any other solution for this? Any help would be appreciated ♥

logoutReducer

persistor.purge()

await persistor.purge()

store.getState()

1 Answer
1

ANSWER

During doing research about this problem I've found this issue, where poster had similar problem. Solution is in the last comment in this post, that is:
react-reset.
Here is my application of this package to mentioned above problem:

const appReducer = combineReducers(productsReducer, auth: accessReducer, usersReducer);

const persistConfig =
key: 'root',
storage,
whitelist: ['auth']
;

const enHanceCreateStore = compose(
applyMiddleware(thunk),
reduxReset()
)(createStore);

const persistedReducer = persistReducer(persistConfig, appReducer);
export const store = enHanceCreateStore(persistedReducer);
export const persistor = persistStore(store);


Then you just simply on logout dispatch action given from redux-reset:

redux-reset

store.dispatch(
type: 'RESET'
)


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.