Search code examples
typescriptdestructuringspread-syntax

Spread operator and destructuring

interface Item {
    id: string;
    title: string,
}

interface ItemState {
    entities: { [id: string]: Item };
}


const toBeDeleted = { id: '2', title: 'item_2' };

const state: ItemState = {
    entities: {
        '1': { id: '1', title: 'item_1' },
        '2': { id: '2', title: 'item_2' },
        '3': { id: '3', title: 'item_3' }
    }
};

const { [toBeDeleted.id]: deleted, ...remaingEntities } = state; // doesn't work

const newState = { entities: remaingEntities };

// That's what I'm trying to achive with the line, that doesn't work:

// deleted.toBe( { id: '2', title: 'item_2' } )

// newState.toBe( {
//     entities: {
//        '1': { id: '1', title: 'item_1' },
//        '3': { id: '3', title: 'item_3' }
//    }
// })

I want to delete an item using the spread operator and destructuring, and destructure 'state' into two parts:

  1. the item I want to delete
  2. the remaining items

Basically pull out 'state.entities['2']' from state and keep the rest.

Is that even possible, or am I mixing two concepts here?

Solution

  • As jcalz wrote in the comments, spreading not from 'state' but from 'state.entities' did it. Thank you jcalz!

    The following line should be changed:

    const { [toBeDeleted.id]: deleted, ...remaingEntities } = state; // WRONG

    const { [toBeDeleted.id]: deleted, ...remaingEntities } = state.entities // CORRECT