Question

随着用户在应用程序中的进展，我想一个接一个地在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'}));

但是，似乎只在商店中添加了最后一个项目，即航空公司，而先前的项目没有保留。

请帮助！

谢谢。

Answer 1

我假设您希望在调度调用之后您的数据如下所示：

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

Answer 2

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

如何在Redux存储中更新对象？

2 个答案: