Redux: drop part of state as unmounting component?

Unless you’re dealing with tens of thousands of records, it’s probably not worth the effort and will complicate your code. Are you sure this is a real problem for your app? Keeping the old state is actually handy, e.g. for instant “Back” button.

If you feel strongly about it you can indeed dispatch a cleanup action when unmounting certain components, or on a route change. However I think that in the vast majority of apps this would be unnecessary, and keeping a cache might be preferable as long as you remember to check for any new items after mounting.


If your data was loaded in the detail component (not master), I think it's OK to restore the state.

Because the state of detail component won't actually be 'cached', besides, data will be downloaded again even you are switching back to show the same resource. And if you're going to show a different resource, the residual state of last visited resource remains until data of current resource is downloaded, and that will be wired to the users.

One of the approach is to define an action/reducer to restore the state when the detail component is going to unmount.

Another way is to restore the state when route changes:

import { LOCATION_CHANGE } from 'react-router-redux'
import * as types from 'constants/ActionTypes'

const initialState = {}

export default function show(state = initialState, action) {

  switch (action.type) {

    case types.LOGOUT:
    case LOCATION_CHANGE:
      return initialState

    case types.SHOW_SUCCESS:
      return action.payload

    default:
      return state
  }
}

Tags:

Reactjs

Redux