Component is not unmount after its delete in store

问题

Project (Todolist) was created with immutable library, source here

Store structure: project have many tasks, In redux store: State - map, projects, tasks - Records

When I asyncly remove project ...

export const removeProject = project => (dispatch) => {
  if (!isProjectExist(project)) return Promise.resolve()
  return projectService
    .delete(project)
    .then(
      () => {
        dispatch(remove(project))
        console.log("post removeProject resolved")
      },
      handleError,
    )
}

.... that was created after initialization - it will be deleted and properly unmounted, but when project was passed as initialState - ProjectList will not be rerendered, and ProjectItem try to render itself with stale data, and fail, as in picture

---

It have tests

---

It looks like reducer returs changed data, but I use immutablejs, and previously i use normalizr-immutable, but I thought that source of issue in this library and write my own normalizeInitialState (source), it did not help, now I think that maybe source of problem in redux-immutable

---

I struggled entire day on solving of this problem

---

creator of redux says

I don't think this is something we can fix. React state changes are asynchronous and React may (or may not) batch them. Therefore, the moment you press “Remove”, the Redux store updates, and both Item and App receive the new state. Even if the App state change results in unmounting of Items, that will happen later than mapStateToProps is called for Item.

Unless I'm mistaken, there is nothing we can do. You have two options:

Request all required state at App (or a lower, e.g. ItemList) level and pass it down to “dumb” Items. Add safeguards to mapStateToProps for “currently unmounting” state. For example, you may return null from render in this case. Potentially we could have the component generated by connect() return null from its render if mapStateToProps returned null. Does this make any sense? Is this too surprising?

Hm, I never saw stubs like return (<div></div>) or safeguards in mapStateToProps in others code

回答1:

markerikson

I'm not entirely sure I follow what exactly your problem is, but as a guess: it sounds like the child component is re-rendering before the parent is. This is a known issue with React-Redux v4 and earlier. The v5 beta fixes that issue. Try installing react-redux@next and see if that takes care of your problem.

来源：https://stackoverflow.com/questions/40823843/component-is-not-unmount-after-its-delete-in-store