如何在Redux中用传入对象更新状态(对象数组)

Question

例如，当前状态为：

{
data: [
{id: 1, number: 100},
{id: 2, number: 200},
{id: 3, number: 300}
]
}

行动是：

const action = (id, number) => {
return {id: id, number: number}
}

如何实现减速器，使其满足以下要求：

1. 如果状态(对象数组(没有与传入对象具有相同id的对象-将传入对象推送到该状态
2. 如果状态具有与传入对象具有相同id的对象，则使用传入对象的数字字段值更新该状态中的对象

情况1:

//incoming object
{id: 4, number: 400}
//result
{
data: [
{id: 1, number: 100},
{id: 2, number: 200},
{id: 3, number: 300},
{id: 4, number: 400}
]
}

情况2:

//another incoming object
{id: 2, number: 250}
//result
{
data: [
{id: 1, number: 100},
{id: 2, number: 250},
{id: 3, number: 300},
{id: 4, number: 400}
]
}

也许它有一个简单的解决方案，但我找不到解决这个问题的正确方法：(此外，我想知道在这种情况下最好的做法是什么。

提前感谢

Answer 1

我更改了您的操作以使用payload属性，但如果您愿意，可以删除它。(拥有它更合适(

const reducer = (state, action) => {
switch(action.type) {
case 'UPDATE_OR_INSERT':
return {
data: [
...state.data.filter(x => x.id !== action.payload.id),
action.payload,
]
}
default:
}
return state;
}
console.log(
reducer({
data: [
{id: 1, number: 100},
{id: 2, number: 200},
{id: 3, number: 300},
{id: 4, number: 400}
]
}, { type: 'UPDATE_OR_INSERT', payload: {id: 2, number: 250}}));

Answer 2

您如何看待此解决方案？

const testState = {
data: []
}
export default (state = testState, action) => {
switch(action.type){
case "SET_DATA":
return [
...state.data.filter(d => d.id !== action.payload.id),
action.payload,
];
default:
return state;
}
};