在嵌套json对象- Redux中添加对象到数组

Question

我很难在JSON对象中向数组添加对象。这是我的状态:

const DATA = 
{
data: [
{
id: 1,
routeName: 'my 2 route',
origin: 'Tel Aviv',
destination: 'Netanya',
date: '25-01-2021',
km: '60',
stops: [
{
id: 0,
address: 'test',
lat: '32.0853',
lon: '34.7818',
customerName: 'test',
tel: '00000',
},
{
id: 1,
address: 'adddress',
lat: '32.0853',
lon: '34.7818',
customerName: 'test',
tel: '00000',
}
],
},
{
id: 2,
routeName: 'my second route',
origin: 'Holon',
destination: 'Hadera',
date: '12-02-2021',
km: '70',
stops: [
{
id: 0,
address: 'address0',
lat: '32.0853',
lon: '34.7818',
customerName: 'customer0',
tel: '00000000',
},
{
id: 1,
address: 'address1',
lat: '32.0853',
lon: '34.7818',
customerName: 'customer1',
tel: '00000000',
},
],
},

],
}

我不知道如何写减速器，尝试了几种方法，但状态没有改变。我的减速器得到路线id + stop来添加这条路线。如果你能帮助我，我会很高兴的:)

Answer 1

您需要使用路线的id找到父路线，然后您需要通过扩展和添加新的停止来创建新的stops数组。

可以使用Array.findIndex()查找实际路由，并对数组进行切片，更新路由。然而，另一种简单的选择是映射data的路由，并使用匹配的id更新路由。

const routeReducer = (state, { type, payload: { routeId, stop } }) => {
switch (type) {
case 'ADD_STOP':
return {
...state,
data: state.data.map(route => route.id === routeId ? {
...route,
stops: [...route.stops, stop]
} : route)
}
}
}

通常在redux中，最好规范化状态，这使得更新单个项更容易。

Answer 2

你可以有一个像这样的减速器:

const updateItemInArray = (array, itemId, updateItemCallback) => {
return array.map(item => {
if (item.id !== itemId) return item;
// Use the provided callback to create an updated item
return updateItemCallback(item);
});
};
const data = (state = [], action) => {
switch (action.type) {
case 'ADD_STOP_SUCCESS':
return updateItemInArray(state, action.payload.routeId, (item) => ({...item, stops: [...item.stops, action.payload.stop]}))
default: return state;
}
}

当动作。类型'ADD_STOP_SUCCESS'被调用，动作的有效负载将包含您想要添加到状态的新停止对象。