Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular what's the meaning of these three dots in @NGRX

Tags:

angular

ngrx

What do these three dots mean exactly, 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 ) } } 
like image 310
Anouar Mokhtari Avatar asked Sep 15 '17 08:09

Anouar Mokhtari


People also ask

What does Triple Dot do in Typescript?

👉 Conclusion When three dots (…) is at the end of function parameters, it's "rest parameters" and gathers the rest of the list of arguments into an array. When three dots (…) occurs in a function call or alike, it's called a "spread operator" and expands an array into a list.

What is the dot angular?

AngularJS - The Dotmessage, which is in the scope of the entire application. It breaks the scope inheritance that was binding all the data. message instances. Now, each new ng-model of message is creating a new instance of message, and so each model will be an unbound instance.

What does three dots in react mean?

... (three dots in JavaScript) is called the Spread Syntax or Spread Operator. This allows an iterable such as an array expression or string to be expanded or an object expression to be expanded wherever placed. This is not specific to React. It is a JavaScript operator.

What is three dots in VUE JS?

That's the spread operator! It grabs all the properties from the object. In that example, it'll copy the object without mutating it.


1 Answers

The three dots are known as the spread operator from Typescript (also from ES7).

The spread operator return all elements of an array. Like you would write each element separately:

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

This is mostly just syntactic sugar as it compiles this:

func(...args); 

to this:

func.apply(null, args); 

In your case this gets compiled to this:

return [...state, action.payload]; //gets compiled to this: return state.concat([action.payload]); 
like image 189
Spitzbueb Avatar answered Sep 24 '22 23:09

Spitzbueb