使用扩展语法将对象添加到集合元素

Question

我正在使用 React redux 并希望在 reducer 上使用扩展语法以便 return 和更新的对象，其中包含一个我想添加对象的集合元素。

我有以下不工作的 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'
}

};

我想要 returned 状态：

{
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: { a: 3}, test4: {a: 4}}};
const payload = { test5: { a: 5 }};

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

使用扩展语法将对象添加到集合元素

adding objects to collections elements using spread syntax

javascript

reducers

spread

reactjs

redux