CODEWITHSUNDEEP
javascriptreactjsreduxreducespread-syntax
Albert
Albert

Reputation: 49

adding objects to collections elements using spread syntax

I'm working with react redux and want use spread syntax on a reducer in order to return and updated object which contains a collection element where I want to add objects.

I have the following reducer logic which is not working because the collection is being filled with the payload object values instead of the object itself:

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

}

The payload is an object like:

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

};

And the returned state I would like to have something like:

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

}

But I got with my previous showed logic something like:

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

}

If someone could help or show me an advanced and good spread syntax guide for this kind of operations would be great.

Thanks in advance.

Upvotes: 2

Views: 354

Answers (1)

Ed Lucas
Ed Lucas

Reputation: 7355

You just need to use your current state, not INITIAL_STATE, as the base of your object.

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

Test example:

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

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

Upvotes: 1

Related Questions