Javascript 将减速机中的重复逻辑移到效用函数

我一直在尝试在redux Reducer中编写一些状态更新逻辑相似的代码。 我的初始状态如下所示：

const initialState = {
  isLoading: false,
  events: [
    {
      year: 2021,
      place: [
        {
          id: 1,
          name: "BD",
          address:[{id:1,text:"test"}]   
        },
        {
          id: 2,
          name: "BD Test"
          address:[{id:5,text:"test one"}]  
        }
      ]
    }
  ]
};

...state,
events: state.events.map((event) => ({
  ...event,
  place: event.place.map((place) => {
    const address = place.address.find((x) => x.id === action.addressId);
    if (address) {
      return {
        ...place,
        address: place.address.map((el) => {
          if (el.id === action.addressId) {
            return { ...el, isChanged:true };
          }
          return { ...el, isChanged:false };
        }),
      };
    }
    return place;
  }),
})),

我在reducer中更新了状态，如下所示：

const initialState = {
  isLoading: false,
  events: [
    {
      year: 2021,
      place: [
        {
          id: 1,
          name: "BD",
          address:[{id:1,text:"test"}]   
        },
        {
          id: 2,
          name: "BD Test"
          address:[{id:5,text:"test one"}]  
        }
      ]
    }
  ]
};

...state,
events: state.events.map((event) => ({
  ...event,
  place: event.place.map((place) => {
    const address = place.address.find((x) => x.id === action.addressId);
    if (address) {
      return {
        ...place,
        address: place.address.map((el) => {
          if (el.id === action.addressId) {
            return { ...el, isChanged:true };
          }
          return { ...el, isChanged:false };
        }),
      };
    }
    return place;
  }),
})),

我在几个地方使用了类似的逻辑，我刚刚添加了一些额外的属性，比如在本例中的

“isChanged:true”和“isChanged:false”

。代码的这一部分似乎是重复的，因此，到目前为止，我尝试编写如下实用程序函数：

const updateAddress = (years, addressId, update) => years.map((year) => ({
  ...year,
  place: year.place.map((place) => place.address.find((el) => el.id === addressId)
    ? {
      ...place,
      address: place.address.map(
        (el) => el.id === addressId ? update(x) : x
      ),
    }
    : place),
}));

此实用程序功能工作正常，但它仅在

el.id==addressId

变为

true

并仅添加

isChanged:true

时更新工作。但是，我还需要向其他地址添加

isChanged:false

，就像在reducer中编写的逻辑一样。 有人能帮我吗？我怎样才能使该函数相应地工作？或者，我是否可以遵循任何其他选项来将该逻辑移动到实用函数。

---

提前感谢。

如果我愿意遵循您的“实用功能”实现，那么解决方案很简单。在最初的实现中，这是：

place.address.map（（el）=>{
if（el.id==action.addressId）{
返回{…el，isChanged:true}；
}
返回{…el，isChanged:false}；
}

这是（以更清晰易读的方式）：

place.address.map（（el）=>{
让纽尔斯塔特；
if（el.id==action.addressId）{
newElState={…el，isChanged:true}；
}否则{
newElState={…el，isChanged:false}；
}
返回newElState；
}

因此，您正在做两件事：

您正在使用某个id（作为utilit函数的参数传递）更新项目

您正在以某种方式（但可能不同）更新所有其他项目

因此，您需要传递另一个更新程序作为实用程序函数的参数：

const updateAddress=（年、地址ID、更新ID、更新其他）=>years.map（（年）=>({
…年，
地点：year.place.map（（地点）=>place.address.find（（el）=>el.id==addressId）
? {
…地点，
地址：place.address.map(
//此箭头函数的工作方式与上面的代码段相同：
//1.如果place.address arrray中的地址具有相同的id
//在addressId中传递id时，将调用回调updateId
//2.如果place.address arrray中的地址没有相同的id
//在addressId中传递id时，将调用回调updateOthers
//
//updateId或updateOthers的真正功能取决于它们的实现，
//updateAddress的调用者把什么作为第三个和第四个参数
（el）=>el.id==地址id？更新id（el）：更新其他（el）
),
}
：地点），
}));

那么我应该如何使用此实用程序函数来更新状态？例如：case“UpdatePlace”：返回{…state，events:updateAddress（）！！！}；使用3个参数调用

updateAddress

。如果将所有信息传递给“UpdatePlace”action in action payload，即

years

，

addressId

和回调

updateId

和

updateOthers

，然后您将其简单地称为

case“UpdatePlace”：返回{……状态，事件：updateAddress（action.payload.years，action.payload.addressId，action.payload.updateOthers）}

。仍然不清楚我将如何添加，地址中的isChanged:true和isChanged:false…就像我之前尝试的实用函数：events:updateAddress（state.years，action.d，（address）=>（{…address，isChanged:true}），但实际上只更新了与action.id匹配的状态