在 reducer 状态下向嵌套数据结构中添加新项

Question

我一直试图在不使用任何实用程序库的情况下使用纯 JS 将新项目添加到我的初始状态，这似乎非常复杂。 这里是我初始状态的结构：

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

我想为匹配的项目添加一个新属性，这样状态就会像这样修改：

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

}; 在我的减速机中，我尝试过：

 case actionType.TOGGLE_INFO:
  return {
    ...state,
    events: state.events.map((x) => x.place[0].id === action.id
      ? { ...x, place: [{ ...x.place[0], newProp: "new Value"}] }
      : x),
  };

该代码更新状态中的值，但随后仅显示事件中的一项（地点）。有什么办法，我仍然可以显示所有事件并在事件中更新选定的位置（通过添加新属性）。我一直在尝试修复它一段时间。因此，我们将不胜感激任何帮助。提前致谢。 到目前为止我的减速器：

   const initialState = {
     isLoading: false,
     events: [
        {
         year: 2021,
         place: [{ id: 1, name: "BD" }, { id: 1, name: "BD Test" }]
       },
       { year: 2020, 
         place: [{ id: 2, name: "AMS" }, { id: 1, name: "AMS TEST" }] }
  ]
};
const commonReducer = (state = initialState, action = {}) => {
  switch (action.type) {
    case "FETCH_EVENTS":
      return {
        ...state
      };
    case "TOGGLE_INFO":
      console.log(state.events);
      return {
        ...state,
        events: state.events[0].map(event =>
          event.id === action.id
            ? { ...event, place: [{ ...event.place[0], isTouched: true }] }
            : event
        )
      };
    default:
      return state;
  }
};
export default commonReducer;

Answer 1

我很难理解您想要实现的目标，但无论如何我都会尽力帮助您。

如果你能过完这一年也会更容易，因为你的数据是结构化的，但我们假设你不能：

    return {
    ...state,
    events: state.events.map(event => {
        if(event.place.find(x => x.id === action.id)) {
            return {
                ...event,
                place: [...event.place, {newProp: "newValue"}]
            }
        } else {
            return event
        }
    })
}

我希望这会有所帮助，但如果没有，我希望您向我展示您尝试实现的目标之前和之后。

更新：

初始状态（你有重复的键，所以我改变了它）：

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

减速器：

const commonReducer = (state = initialState, action = {}) => {
switch (action.type) {
    case "UpdateEvents":
        return {
            ...state
        };
    case "UpdatePlace":
        console.log(state.events);
        return {
            ...state,
            events: state.events.map(event => {
                const place = event.place.find(x => x.id === action.id);
                if (place) {
                    return {
                        ...event,
                        place: event.place.map(x => {
                            if (x.id === action.id) {
                                return { ...x, isTouched: true };
                            } else {
                                return x;
                            }
                        })
                    };
                } else {
                    return event;
                }
            })
        };
    default:
        return state;
}
};
  export default commonReducer;

Place.js:

return (
    <div>
    ID: { props.place.id }
    Name: { props.place.name }
    <div>{ props.place.isTouched ? "TOUCHED" : "" } < /div>
    < button onClick = { setTouched } > SetTouched < /button>
    < /div>
  );
 };

https://codesandbox.io/s/wonderful-black-m6il1