Redux: drop part of state as unmounting component?

react clear state on unmount
component will unmount reset state
react prevent component from unmounting
redux reset state on route change
remove component from dom react
react unmount component
redux-form clear on unmount
react unmount child component

i'm currently writing an app with react, redux and react-router.

Many of the route (or subroute) of the app, fill the state of the redux store with eventually own reducers that are combined.

but often, the part of the state that is manage by the routed component is specific to this component, and "can be dropped" after the component is unmounted.

i fear that as the user browse different screen, he will fill the state with unused data and bloat the whole app. so i'm thinking about a way to drop part of the state that are unused.

let's take i.e. a CRUD app for multiple distinct entities (Questions, Posts, Images, ....). While i'm listing the Questions it might not be necessary to have Posts in the state, and vice-versa. Should i drop the Posts list while transitioning to the Question list ?

is this a bad practice? is there a good way to do this ? what to you think?

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.

Redux: drop part of state as unmounting component?, Many of the route (or subroute) of the app, fill the state of the redux store with eventually own reducers that are combined. but often, the part of the state that is� * fixed issue #85 Redux state removed before components unmount see #85 react runs willUnmount from parnt and down the tree, so willUnmount is run firstly on DynamicModuleLoader and only then on connected children DynamicModuleLoader removes dynamic reducers on willUnmount that leads to store's state change and connected children run their

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
  }
}

Redux state removed before components unmount � Issue #85 , Redux state removed before components unmount #85. Closed Hoping for an official fix, so we can remove this hack. Thanks for the great� In an actual Redux example, the state object could be built by combining two separate reducers to act independently on the byHash and byId properties of the state object to simply the logic.

@Dan Abramov not only is this not necessary but it also can lead to difficult to track bugs. We have experienced that, since componentWillUnmount() is asynchronous, when dispatching an action to clear a certain reducer inside of componentWillUnmount() can cause bugs when you go from this view directly to another view that relies on this section of the reducer.

For example:

Say you have the following store state shape:

const state = {
    list: ["thing"]
}

Then imagine I use this state in a view called Things

Then imagine I realize that in 9 out of 10 of my other views I am not using the state.list, so I decide I want to prevent "bloat" or "memory leaks" and I put an action that clears this section of my state in the componentWillUnmount in Things

You would expect that the sequence of events would always be:

  1. Unmount Things
  2. dispatch action to clear state.list
  3. Then mount the next view
  4. Then in 1 out of the 10 views repopulate state.list IF you need it in this view

However, this is not the sequence. Sometimes it instead will be:

  1. Unmount Things and go directly to another view that needs state.list
  2. Immediately mount this next view. Our view DOES need state.list so we dispatch this action. OR since state.list already exists we do not dispatch the fetch action because we already have it.
  3. Just a moment later the componentWillUnmount dispatches the CLEAR action successfully
  4. You unintentionally CLEAR the state.list in this view even though you did not want to. And of course since we are @connected our screen goes blank!

That is, even though Redux is synchronous componentWillUnmount is not synchronous and therefore any action dispatched within it can not be guaranteed to happen in the order you intend. This is a problem in any edge case where you do actually go directly to another view that DOES want that section of state.

One way around this is to have a conditional inside of componentWillUnmount that says "Only dispatch the CLEAR action IF I am leaving this view (unmounting it) for the following reason... NOT WHEN I AM GOING TO THIS OTHER VIEW THAT DOES RELY ON THIS SECTION OF STATE. You can do this by, for example, having a property in localState that is called something like shouldIClearList:, and it is true by default unless I click the button called, goToMyOtherViewThatNeedsList. However, this adds unnecessary complexity in many cases where the link to the other view that needs list is in a completely different top level parent component like the Navbar, and therefore, whether or not the view you are trying to go to is this "problematic view" is not easily "known" by your child Things component.

I actually think the idea of "Bloat" is a valid one, and the best way to clear redux upon unmounting without running into an issue like this would be greatly appreciated. The only solution I can see off the bat is to NOT ever clear the reducer inside of componentWillUnmount. It is too dangerous. OR if you do absolutely have to, making sure there is absolutely no way in your app to go from this view directly to another view that needs this section of state (a very hard thing to do in a huge app without having to have some kind of documentation shared across all of the software teams at the company).

Safely deleting stores � Issue #1092 � reduxjs/redux � GitHub, We're in the process of migrating a pretty massive codebase to Redux, so we're references to the store globally so there is no need to do anything like unmounting. to the store object, and it will be garbage collected together with its state. In my component, I modified the remove() function to dispatch a reset action: With Redux, it’s clear that all components get their state from the store. It’s also clear where components should send their state changes — also the store. The component initiating the change is only concerned with dispatching the change to the store and doesn’t have to worry about a list of other components that need the state change.

React Redux Integration: Part 1 of a detailed guide from ag-Grid, Clipboarde � Drag & Drop; See Also This section introduces how React components using the ag-Grid Data Table can take advantage of a When using Redux, you move state from your components into a single immutable store, ' Reload Component' button: unmounts and then re-mounts the File View component. No. The state is part of the instance. If state should be maintained then it probably doesn't belong in the component itself and should live in some data store, or the parent (and passed in as props). You could do something a little bit clever and have a hidden prop instead of unmounting.

React state update on an unmounted component, A React state update; An unmounted component Showing a drop down of pets and selecting a dog or cat Ok first part of our problem is accomplished, thats the React state update , now we need to create the 2nd part - An� Reducers process the actions, computing the new state; The new state of the whole application goes into a single store. Components receive the new state as props and re-render themselves where needed. Most of the above concepts are not unique to Redux, but Redux implements them in a very clean and simple way, with a tiny API. Having switched a

Cleaning up State on Route Change, Cleaning up State on Route Change PRO Unlock all content & remove ads Implementing a Tabs Component with React & Redux While creating a basic� Coupled with Redux this means that performance goes down the drain because pretty much the entire app continuously keeps updating. Redux does fire a listener to extract new props from Redux state on update but if it doesn't change and extracting the new props isn't expensive then it is not a big concern.

Comments
  • Whether it's good idea for your app or not is unclear, but surely you can drop state simply by adding an action for it?
  • i've updated the post with an example of a CRUD app. but if i understand , you suggest to dispatch an action on the "unmount" of the component to set the state to {} or smth like that?
  • You can do that or respond to react-router-redux actions.. you can pretty much do whatever.
  • I have hundreds of thousands of data on a component where the unmounting and cleaning the state became important. :(