如何更新 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'}));

但是，商店中似乎只添加了最后一项，即 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 存储中的对象？

How to update an object in the redux store?

reactjs

redux

react-redux

redux-store