合并redux对象

Question

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

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

我从后端提取对象，并将它们与还原器中的现有状态合并为：

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

这非常有效，可以用新拉的版本添加/替换已经处于该状态的对象。

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

基本上，如果该州有

{
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} };
}, {})

如果您需要删除重复项，请参阅此答案。

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; }