1

随着用户在应用程序中的进展，我想一个接一个地在 redux 存储中的对象中添加项目。因此，我想在商店中添加商品而不删除商店中以前的商品。

请参考以下代码：

减速机代码：

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

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

请帮忙！

提前致谢。

4

2 回答 2

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;
    }
};
于 2018-12-31T09:48:48.453 回答
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;
}

};

in your action you are passing data wrongly. you need to destructure details before sending it. if you don't destructure it will always pass details: your object

import uuid from 'uuid';

export const addTravelPlan = (details) => ({
    type: 'ADD_PLAN',
    currentTravelPlan: {
        id: uuid(),
        ...details
    }
});
于 2018-12-31T09:54:11.610 回答