Angular what is the value of the three points in @NGRX

Question

what exactly these three points mean and why do I need them?

export function leadReducer(state: Lead[]= [], action: Action {
    switch(action.type){
        case ADD_LEAD:
            return [...state, action.payload];
        case REMOVE_LEAD:
            return state.filter(lead => lead.id !== action.payload.id )
}
}

Answer 1

Three points are known as the distribution operator from Typescript (also from ES7 ).

The spread operator returns all elements of the array. Like every single item:

let myArr = [1, 2, 3];
return [1, 2, 3];
//is the same as:
return [...myArr];

It is basically syntactic sugar as it compiles this:

func(...args);

:

func.apply(null, args);

In your case, this will compile:

return [...state, action.payload];
//gets compiled to this:
return state.concat([action.payload]);

Answer 2

The operator ...(works by returning each value from index 0to index length-1: