Question

在我的Redux应用程序中，我有一系列对象，代表日期列表＆amp;开店时间看起来像这样：

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

我创建了一个包含一周内天数列表的组件。当点击其中一天时，调度完成的有效载荷代表一天：

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

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

当我在一天dayObject中改变开放时间时，我再次推动它，改变开放时间，所以我想删除旧对象并将新对象推入阵列，新时间。

  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', ...}格式发送操作。这使您有权指定操作类型，以指示您的reducer如何使用有效负载。我会想象{type: 'REMOVE_DAY', day: {}}和{type: 'UPDATE_HOUR', day: {}}等行为。

另一个重要的事情是了解您的模型和数据结构。例如，使用id而不是plain数组的对象会更好吗？通过这种方式，您可以使用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
  }
}

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

1 个答案: