随着用户在应用程序中的进展,我想一个接一个地在redux存储中的对象中添加项目。因此,我想在商店中添加项目而不删除商店中的先前项目。
请参考以下代码:
reducer的代码:
const currentTravelPlanDefaultState = {};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
currentTravelPlan: {
...state.currentTravelPlan,
...action.currentTravelPlan
}
}
default:
return state;
}
};
操作代码:
import uuid from 'uuid';
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
details
}
});
分配呼叫的代码:
store.dispatch(addTravelPlan({destination: 'Cuba'}));
store.dispatch(addTravelPlan({hotel: 'Cuba Grand'}));
store.dispatch(addTravelPlan({travelMode: 'AirWays'}));
但是,似乎只在商店中添加了最后一个项目,即航空公司,而先前的项目没有保留。
请帮助!
谢谢。
答案 0 :(得分:0)
我假设您希望在调度调用之后您的数据如下所示:
currentTravelPlan: {
id: uuid(),
destination: 'Cuba',
hotel: 'Cuba Grand',
travelMode: 'Airways'
}
在这种情况下,您的操作代码应为:
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
...details
}
});
和减速器:
const currentTravelPlanDefaultState = {};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
...action.currentTravelPlan
}
default:
return state;
}
};
答案 1 :(得分:0)
在reducer中,您应该将currentTravelPlan设置为空对象,以便知道状态如何。
const currentTravelPlanDefaultState = {
currentTravelPlan: {}
};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
currentTravelPlan: {
...state.currentTravelPlan,
...action.currentTravelPlan
}
}
default:
return state;
}
};
在执行操作时,您错误地传递了数据。您需要先破坏详细信息,然后再发送。如果您不进行破坏,它将始终传递详细信息:您的对象
import uuid from 'uuid';
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
...details
}
});