使用传播语法将对象添加到集合元素中

Question

我正在使用react redux，并希望在reducer上使用传播语法，以便返回并更新包含要在其中添加对象的collection元素的对象。

我有以下的reducer逻辑不起作用，因为该集合是用有效载荷对象值而不是对象本身填充的：

export default function(state = INITIAL_STATE, action){
switch (action.type){
    case CREATE:
        return {...INITIAL_STATE,collection:{...state.collection,...action.payload}};
    default:
        return state;
}

}

有效负载是一个像这样的对象：

{
'DG67QBXQJW7':{
    key:'12345',
    price:'15',
    name:'test'
}

};

以及返回的状态，我想要类似的东西：

{
name:'items',
collection:{
    'DG67QBXQJW7':{
        key:'12345',
        price:'15',
        name:'test'
    },
    'FB843VUV3N9':{
        key:'67890',
        price:'11',
        name:'test2'
    }
}

}

但是我的先前展示的逻辑类似：

{
name:'items',
key:'12345',
price:'15',
name:'test'

}

[如果有人可以帮助或向我展示这种操作的高级且扩展良好的语法指南，那将很好。

提前感谢。

Answer 1

您只需要使用当前状态而不是INITIAL_STATE作为对象的基础。

return {...state, collection: {...state.collection, ...action.payload}};

测试示例：

const state = { name: 1, collection: { test3: 3, test4: 4 }};
const payload = { test5: 5 };

console.log({...state, collection: {...state.collection, ...payload}});