如何更改特定对象值而不是覆盖 redux 中的整个对象？

Question

我正在使用 reactNative 开发一个应用程序，我需要在 redux 存储中存储一个对象。我希望能够编辑这个对象并在前端显示它。我有一个功能计数器可以这样做，但是当我用一个对象尝试它时，它会将整个对象覆盖为已更改的项目。我如何才能只编辑该特定项目并保持对象中的所有其他项目不受影响？

在这种情况下，我主要想关注 setBaseDisarmed 操作

我的操作：

export const increment = () => ({
    type: INCREMENT,
});

export const decrement = () => ({
    type: DECREMENT,
});

export const reset = () => ({
    type: RESET,
});
    
export const setBase = () => ({
    type: SET_BASE,
});

export const setBaseArmed = () => ({
    type: SET_BASE_ARMED,
    id: 1,
    payload: { state: 'armed' },
});
export const setBaseDisarmed = () => ({
    type: SET_BASE_DISARMED,
    id: 1,
    payload: { base: { state: 'disarmed' } },
});

我的减速机：

const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case INCREMENT:
            return {
                ...state,
                counter: state.counter + 1,
            };
        case DECREMENT:
            return {
                ...state,
                counter: state.counter - 1,
            };
        case RESET:
            return {
                ...state,
                counter: 0,
            };
        case SET_BASE:
            return {
                ...state,
                id: 1,
                title: 'Title Name',
                state: 'armed',
                created_at: '2022-03-10T12:24:14.000000Z',
                updated_at: '2022-04-11T07:42:34.000000Z',
            };
        case SET_BASE_ARMED:
            return {
                ...state,
                ...action.payload,
            };
        case SET_BASE_DISARMED:
            return {
                ...state,
                ...action.payload,
            };
        case SET_BASE_HOME:
            return {
                ...state,
                state: 'home',
            };
        default:
            return state;
    }
};

原始状态：

base: "[{\"id\":1,\"title\":\"Title Name\",\"state\":\"armed\",\"created_at\":\"2022-03-10T12:24:14.000000Z\",\"updated_at\":\"2022-04-11T07:42:34.000000Z\"}]"
counter: "0"

setBaseDisarmed 在 redux 存储中的作用：

base: "{\"state\":\"disarmed\"}"

我想要它做什么：

base: "[{\"id\":1,\"title\":\"Title Name\",\"state\":\"disarmed\",\"created_at\":\"2022-03-10T12:24:14.000000Z\",\"updated_at\":\"2022-04-11T07:42:34.000000Z\"}]"
counter: "0"

非常感谢所有提示和帮助。谢谢你和我一起调查。

Answer 1

关于主题；在你的情况下，你正在尝试做这样的事情。

let base = { base: [{id: 1, state: 'armed'}, {id: 2, state: 'disarmed'}] }
let addition = { base: { state: 'disarmed' } }
let newBase = {
   ...base,
   ...addition,
}

// newBase = { base: { state: 'disarmed' } }

1- 你在 Redux 上保留了一个对象列表。

2-您想更改列表中对象的特定区域。

第 1 步：更改此功能。

export const setBaseArmed = () => ({
     type: SET_BASE_ARMED,
     payload: { id: 1, state: 'armed' },
});

第 2 步：让我们对减速器进行更改。

case SET_BASE_ARMED:
     // We find the targeted item from the list.
     let targetIndex = state.base.findIndex(item => item.id === action.payload.id)

     // We are adding it to the valuable object we sent above.
     let targetObject = {...state.base[targetIndex ], ...action.payload}

     // And we put our updated object back in its place in the list.
     return {
          ...state,
          base: [...state.base.slice(0, targetIndex), targetObject, ...state.base.slice(targetIndex+ 1)]
     };

我们差点就这么干了

let base = [{id: 1, state: 'armed', title: 'Title 1'}, {id: 2, state: 'disarmed', title: 'Title 2'}]
let payload = {id: 1, state: 'disarmed'}


let targetIndex = base.findIndex(item => item.id === payload.id)
let targetObject = {...base[targetIndex], ...payload}
let newBase = [...base.slice(0, targetIndex), targetObject, ...base.slice(targetIndex+ 1)]

console.log('Default Base:', base)
console.log('New Base:', newBase)

Answer 2

我和一位同事一起发现了这个问题。我的操作只返回了我想要更改的数据，而不是返回整个对象，因此所有其余数据都丢失了。我们仍然不确定这是否是最佳解决方案，但它确实有效。该喝咖啡了:)

case SET_BASE_ARMED:
    return {
        ...state,
        base: {
            ...state.base,
            state: action.payload.state,
        },
    };

谢谢大家的帮助

如何更改特定对象值而不是覆盖 redux 中的整个对象？

how to change specific object value instead of overwriting the entire object in redux?

react-native

redux

react-redux