当相应项目中没有值时，从 Redux 初始 state 中删除完整的 object

Question

In my reducer, I have the initial state which looks like this:

    const initialState = {
        isLoading: false,
        events: [
        {
        year: 2021,
        place: [
        {
          id: 1,
          name: "BD"
        },
        {
          id: 2,
          name: "BD Test"
        }
      ]
    },
    { year: 2020, place: [{ id: 3, name: "AMS" }, { id: 4, name: "AMS TEST" }] }
  ]
};

I have been trying to implement the functionality of deletion operation. So, when the button will be clicked the "deleteItems" action will be dispatched that will remove the corresponding items from the place . This functionality works fine. But,I am trying to remove the whole items from the events array if there is no values in place .

This is what I have tried already but it just removes the individual place . But, I need to write the logic here of removing the whole items when place becomes empty.

case "deleteItems":
  return {
    ...state,
    events: state.events.map(event => {
      const place = event.place.find(x => x.id === action.id);
      if (place) {
        return {
          ...event,
          place: event.place.filter(x => x.id !== action.id)
        };
      }
      return event;
    })
  };

So, after modifications, the state would look like this:(when there is no values in place for year 2021)

const initialState = {
  isLoading: false,
  events: [
    { year: 2020, place: [{ id: 3, name: "AMS" }, { id: 4, name: "AMS TEST" }] }
  ]
};

Does anybody know how to accomplish this. Any helps would be highly appreciated.Thanks in Advance. Demo can be seen from here

Answer 1

I removed the places first. Then I filtered events based on whether the place array is empty or not. After that, I returned the state.

case "deleteItems":
      const eventsPostDeletingPlaces = state.events.map(event => {
        const place = event.place.find(x => x.id === action.id);
        if (place) {
          return {
            ...event,
            place: event.place.filter(x => x.id !== action.id)
          };
        }
        return event;
      });
      const eventsWithPlaces = eventsPostDeletingPlaces.filter((each) => each.place.length);
      return {
        ...state,
        events: eventsWithPlaces
      }

Check the edited sandbox here

Answer 2

Basically the same logic as in the first answer, but with reduce instead of a map and an extra filter . Just an option.

case "deleteItems":
  return {
    ...state,
    events: state.events.reduce((events, event) => {
      const place = event.place.find(x => x.id === action.id);

      if (place) {
        event.place = event.place.filter(x => x.id !== action.id);
      }

      if (event.place.length > 0) {
        events.push(event);
      }

      return events;
    }, [])
  };

codesandbox