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

Question

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

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

请帮忙！

提前致谢。

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