根据条件修改 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', ...} 格式的操作。这授予您指定操作类型的权力，以指示您的减速器如何使用有效负载。我会想象像{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
  }
}