javascript - 根据条件修改 Redux 中的对象数组

Question

在我的 Redux 应用程序中，我有一个对象数组，表示开业商店的日期和时间列表，如下所示:

[{day: 'Monday', from:'10', to:'18'}, {day: 'Tusday', from: '8', to:'16'}, {...}]

我创建了一个包含一周中的天数列表的组件。单击一天中的某一天时，将使用代表一天的有效负载完成调度:

{day: 'Monday', from:'10', to:'18'}

我从一个空数组开始，将一个 dayObject 插入该数组。当我再次推送同一个对象时，这意味着我想删除它(在 React 组件上取消选中它)。

当我更改一天对象的开放时间时，我会再次推送它，并更改开放时间，因此我想删除旧对象并将新对象推送到数组中，并使用新的时间。

  if(_.some(days,
    {
      day: action.payload.day
    }
  )) {
    // replace current object, how ?

  } 

  if(_.some(days,
    {
      day: action.payload.day,
      from: action.payload.from,
      to: action.payload.to
    }
  )) {
    // duplicate, uncheck on UI so remove it
    _.remove(days {day: action.payload.day})
  } else {
    days.push(action.payload)
  }

所以，看起来我的问题在于检测该对象是否是重复的或者是某个 dayObject 的修改版本，所以我应该替换它。有什么帮助吗？

Answer 1

首先，您可以以 {type: 'ACTION_TYPE', ...} 格式分派(dispatch)操作。这使您能够指定操作类型，以便指示您的 reducer 如何使用有效负载。我想像 {type: 'REMOVE_DAY', day: {}} 和 {type: 'UPDATE_HOUR', day: {}} 这样的操作。

另一件重要的事情是了解您的模型和数据结构。例如，使用带有 id 的对象而不是普通数组会更好吗？这样你就可以使用 id 来引用你的日子，而不是传递整个对象。

// Example reducer
const store = (state, action)=> {
  switch (action.type) {
    case 'ADD_DAY':
      return [...state, action.payload];
    case 'REMOVE_DAY':
      return state.filter((date)=>(date.day !== action.payload.day));
    case 'UPDATE_DAY':
      return state.map((date)=>{
        if (date.day === action.payload.day) {
          return {...date, ...action.payload};
        }
        return date;
      });
    default:
      return state;
  }
}

// Example action creator
const updateDay = (payload)=>{
  return {
    type: 'UPDATE_DAY',
    payload
  }
}