How to clear a redux store completely? Browser back button restores the store

Question

I have an application that has a cart in redux store. When user completes the purchase. I Reset (redux store) the cart when moves out of the Final page. But when user clicks the browser back button. The redux store is back with the previous data. How do I clear the redux store completely? There is no Login/Registration Required for Purchase. I am using Reactjs with Redux (with redux-thunk).

When user hits backbutton - (don't take to previous page i.e. payment page again)

  componentDidMount () {
    window.onpopstate = this.onBackButtonEvent
  }

onBackButtonEvent = (e) => {
        e.preventDefault()
        console.log('in backbutton')
        this.props.history.push('/insta-repair')
        this.props.resetCart()
        window.onpopstate = () => {}
      }

cart action

export const resetCart = () => ({
  type: cartActionTypes.RESET_CART,
  data: []
})

cart reducer

case CartTypes.RESET_CART:
  return {
    ...initialState,
    item: action.data
  }

The problem

When user hits browser back button. Then the Previous redux store data is accessible. Is there a way to completely Reset the Store?

Please feel free to update your question with a [Minimal, Complete, and Reproducible](https://stackoverflow.com/help/minimal-reproducible-example) example of your code so other here may see what you're working with. An alternative approach may be to control the navigation (via redirects) through the purchase flow such that any back navigation takes a user to the start of the flow versus some point in the middle of it with some indeterminate state. — Drew Reese, Jun 03 '20 at 07:30
Check [How to reset the state of a Redux store?](https://stackoverflow.com/a/35641992/2873538) and [How to reset state of Redux Store using reduxjs/toolkit?](https://stackoverflow.com/a/61943631/2873538) — Ajeet Shah, Jun 03 '20 at 07:53
I have this problem only in the Chrome browser _(although users say "they are pretty sure it happens in Firefox too")_. The state is pretty unpredictable when clicking forward and backward in the history multiple times, probably because the caching (in the service worker ?) gets updated according to criteria I don't understand. "Disable cache" doesn't change this. — kca, Jan 26 '23 at 11:05

mohammed_ayaz · Answer 1 · 2020-07-14T06:47:58.287

The code in my question was already clearing the Redux store. The problem here was that it making request to server when there was cart_id present in the url, which would fetch redux store data again.

when the user hits back button on the browser. It would take him to the cart page. i.e. www.mysite.com/cart/id and this url would request the server for data and store it in redux store again.

I wanted to make sure that redux store was cleared at root reducer level. So I used code from this answer https://stackoverflow.com/a/35641992/6555647

const reducers= combineReducers({
  config: config,
  cart: cartReducer,
  shop: shop
})

const rootReducer  = (state, action) => {
  if (action.type === 'RESET_CART') {
    state = undefined; // this will set the state to initial automatically
  }
  return reducers(state, action);
}
export default rootReducer;

You can dispatch the 'RESET_CART action anywhere.

The back button problem

I used to redirect user to Order tracking Page. Instead of history.push() I used history.replace()

this.props.history.replace({
    pathname: `${BASE_URL}/success/${orderNumber}`,
    orderNumber: orderNumber
})

You could just do

this.props.history.replace(`${BASE_URL}/success/${orderNumber}`)

if you don't want to push orderNumber to state of the newly mounted component.

history.replace('/route') will replace your current route with a new given route

If user hits back, if he would be on the same page. If he won't redirected to previous page. If hits back button again. He will go to home page. I have added code for that in the OrderNumber Component.

  componentDidMount () {
    window.onpopstate = this.onBackButtonEvent
  }
  onBackButtonEvent = (e) => {
    e.preventDefault()
    console.log('in backbutton')
    this.props.history.push('/insta-repair') //homepage route.
    this.props.resetCart()
    window.onpopstate = () => {} // reset the onpopstate
  }

Remember to reset the window.onpopstate or else every back button event will take to same page on every component in your app.

Read more about history object here - https://reacttraining.com/react-router/web/api/history

How to clear a redux store completely? Browser back button restores the store

1 Answers1