CODEWITHSUNDEEP
javascriptarraysreactjsreduxreact-redux
ninja
ninja

Reputation: 375

remove full object from Redux initial state when there is no values in the corresponding items

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

Upvotes: 1

Views: 116

Answers (2)

artanik
artanik

Reputation: 2704

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

Upvotes: 0

himayan
himayan

Reputation: 842

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

Upvotes: 2

Related Questions