javascript - How to delete nested element in map Immutable.js

Question

I have the following structure in my redux case:

initialState: SearchState = fromJS({
  isFiltersPanelOpen: false,
  sections: {
    type: {       Course: {
        isSelected: false,
        filterValues: 42,
      },
      Path: {
        isSelected: false,
        filterValues: 12,
      },
      Resources: {
        isSelected: false,
        filterValues: 11,
        }
     }
  }
})

I have to delete Resources. I used deleteIn, but I have a problem. When other cases work, they get the initial value, and my deleted Resources come back to life. If I correctly understand, I should use update/updateIn and then delete/deletIn. I need some examples please.

question from:https://stackoverflow.com/questions/65902726/how-to-delete-nested-element-in-map-immutable-js

Answer 1

I am answering blindly here. Without having seen any code, the issue is probably that the modified state is not applied.

Remember, Immutable objects never change, mutations always result in a new object being returned. So if you forget to return/apply the returned object, your change is lost.

const reducer = createReducer(initialState, {
    deleteSection: (state, { id }) => {
        return state.deleteIn(['sections', 'Resources']);
    },
    deleteSectionToo: (state, { id }) => {
        // Update can be used too, but it is mostly useful when you want to change something.
        // e.g. add/remove an item in a sub-list.
        return state.update('sections', (sectionsState) => {
            return sectionsState.delete('Resources');
        });
    }
};

For more examples, consult the docs.