如何彻底清除 redux 商店？ 浏览器后退按钮恢复存储

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 ie 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?

Answer 1

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. ie 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