当相应项中没有值时，从 Redux 初始状态中删除完整对象

Question

在我的减速器中，我的初始状态如下所示：

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

  ]

};

我一直在尝试实现删除操作的功能。因此，当单击按钮时，将调度“deleteItems”操作，该操作将从place. 此功能工作正常。但是，events如果place.

这是我已经尝试过的，但它只是删除了个人place. place但是，我需要在这里编写当变为空时删除整个项目的逻辑。

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;

    })

  };

因此，在修改后，状态将如下所示：（当 2021 年没有值时）

const initialState = {

  isLoading: false,

  events: [

    { year: 2020, place: [{ id: 3, name: "AMS" }, { id: 4, name: "AMS TEST" }] }

  ]

};

有谁知道如何做到这一点。任何帮助将不胜感激。在此先感谢。Demo可以从这里看到

Answer 1

我先删除了这些地方。然后我根据位置数组是否为空来过滤事件。之后，我返回了状态。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      }在此处检查已编辑的沙箱

Answer 2

基本上与第一个答案中的逻辑相同，但用a和 extrareduce代替。只是一种选择。mapfiltercase "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;    }, [])  };密码箱