合并 redux 对象
Merging redux objects
我正在使用 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'
}]
}
}
在你的减速机里面:
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。
您可以通过以下方式将现有日期与新日期合并:
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 来保持 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'
}]
}
}
在你的减速机里面:
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。
您可以通过以下方式将现有日期与新日期合并:
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; }