合并 redux 对象

Question

我正在使用 redux 来保持 React.JS 应用程序的状态。

状态保留名为 event 的对象，这些对象看起来 {id: 2, title: 'my title', dates: [{start: '02-05-2021', end: '02-05-2021'}] } 按对象 ID 散列。

我从后端提取对象并将它们与现有状态合并到我的 reducer 中，如：

case LOAD_SUCCESS:
  draft.loading = false;
  draft.events = {
    ...state.events,
    ...action.events.reduce((acc, val) => {
      return { ...acc, [val.id]: val };
    }, {})
  };
  break;

效果很好，adding/replacing 个对象已处于新拉版本的状态。

但这并不是我所需要的。我想选择 event 对象的后一个 action.events 版本，dates 除外。我想合并然后删除重复数据的日期，例如删除重复项。

基本上，如果该州有

{
  2: {
    id: 2,
    title: 'my title',
    dates: [{
      start: '02-05-2021',
      end: '02-05-2021'
    }]
  }
}

然后我拉了

[{
  id: 2,
  title: 'my new title',
  dates: [{
    start: '03-06-2021',
    end: '03-06-2021'
  }]
}]

合并后的结果状态应该是

{
  2: {
    id: 2,
    title: 'my new title',
    dates: [{
      start: '02-05-2021',
      end: '02-05-2021'
    }, {
      start: '03-06-2021',
      end: '03-06-2021'
    }]
  }
}

Answer 1

在你的减速机里面：

action.events.reduce((acc, val) => {
    const existingDates = state.events[val.id]?.dates || [];
    const dates = [...val.dates, ...existingDates];
    return { ...acc, [val.id]: {...val, dates} };
}, {})

如果您需要删除重复项，请参阅 this answer。

Answer 2

您可以通过以下方式将现有日期与新日期合并：

const state = {
  2: {
    id: 2,
    title: 'my title',
    dates: [{ start: '02-05-2021', end: '02-05-2021' }]
  }
};

const update = [{
  id: 2,
  title: 'my new title',
  dates: [{ start: '03-06-2021', end: '03-06-2021' }]
}];

const merged = {
  ...update.reduce((newState, { id, title, dates }) => ({
    ...newState,
    [id] : {
      ...newState[id],
      title,
      dates: [...newState[id]?.dates, ...dates]
    }
  }), state)
};

console.log(merged);

.as-console-wrapper { top: 0; max-height: 100% !important; }

合并 redux 对象

Merging redux objects

javascript

reactjs

react-redux

immutable.js