CODEWITHSUNDEEP
reactjsreact-reduxredux-persist
Miss. Tea
Miss. Tea

Reputation: 81

How to clear Redux Persist Store after a certain time

In my React App, I want the user's cart and data to be cleared after a certain time.

I tried using a setTimeout() function that runs persistor.purge() after 1 hour, but this method doesn't work when you close the browser tab. So if the user, opens again the website after days, the store data is remained there.

Second method, I tried (redux-persist-expire) package, but nothing changes in the website. My code, index.js file,

import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { createStore, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const expireReducer = require("redux-persist-expire");

const persistConfig = {
    key: "root",
    storage: storage,
    transforms: [expireReducer(rootReducer, { expireSeconds: 10 })],
};

const pReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(pReducer, composeEnhancers(applyMiddleware(thunk)));

export const persistor = persistStore(store);
export default store;

Is there something needed to be fixed in the code? Or is there a better way to approach it.

Upvotes: 6

Views: 8208

Answers (2)

Sushil
Sushil

Reputation: 533

Even I tried similar way but redux-persist-expire didn't work for me as well. I tried with setTimeout() and was able to remove persisted store after certain time. You can try as below which worked for me:

Let's take signin example. I have created two redux actions setUserLoggedin and removeUserLoggedin for two action types: SET_USER_LOGGEDIN and REMOVE_USER_LOGGEDIN. In setTimeout function we need to dispatch removeUserLoggedin action.

In my login page, using axios to call an API to login user:

    import axios from "axios";
    import { useDispatch } from "react-redux";
    import { toast } from "react-toastify";
    import { setUserLoggedin } from "../../services/redux/actions/user-action";
    import { runLogoutTimer } from "../../services/auth/auth";

    const Signin = () => {
        const dispatch = useDispatch();
    
        const handleSignin = async (e) => {
            e.preventDefault();
        
            const response = await axios
            .post(url, {
                login_id: username,
                password: password
            })
            .catch(function (error) {
                if (error.response) {
                    // The request was made and the server responded with a status code that falls out of the range of 2xx
                    console.log(error.response.data);
                    console.log(error.response.status);
                    console.log(error.response.headers);
                } else if (error.request) {
                    // The request was made but no response was received
                    // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                    // http.ClientRequest in node.js
                    console.log(error.request);
                } else {
                    // Something happened in setting up the request that triggered an Error
                    console.log('Error', error.message);
                }
                console.log(error.config);
            });

            if (response) {
                toast(response.data.message, {type: "success"});
                // Now save user details received from your API response in your redux store by dispatching your setUserLoogedin action
                dispatch(setUserLoggedin(response.data));
                // Call a runLogoutTimer function and pass your dispatch method and the timeout time received from your API response, need to send milliseconds.
                runLogoutTimer(dispatch , response.data.expires_in_seconds*1000);
            }
        }

        return (
            <h1>Your Signin Form</h1>
        )
    }

    export default Signin;

//Create auth.js file and write your time out function there. Or you can place your time out function in you singin.js itself.
import { removeUserLoggedin } from "../redux/actions/user-action";

export const runLogoutTimer = (dispatch, timer) => {
    setTimeout(() => {
        dispatch(removeUserLoggedin());
    }, timer);
}

Hope it is helpful

Upvotes: 0

Konstantin Zhitkov
Konstantin Zhitkov

Reputation: 23

You should create an expiration date timestamp and keep it in your persisted store.

When the user opens your website for the second time, you retrieve that timestamp from the persisted store and compare it to the current date/time. If the difference is more than one hour, you just clear the store. You could also set the expiration date to a new value.

This idea is similar to the way Cookies work.

Upvotes: 1

Related Questions