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

时间:2018-12-31 09:30:00

标签: reactjs redux react-redux redux-store

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

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

请帮助!

谢谢。

2 个答案:

答案 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
    }
});