What in JavaScript ES6, does `return { ...state, all: action.payload.data }` with that last additional property do?

Question

Short question is: what does the line

return { ...state, all: action.payload.data };

do? (particularly with the all: part).

If you don't use ES6, and state has

2 properties like below
10 properties instead of 2
unknown number of properties

then how would it be written?

Details: it is part of React / Redux. In a reducer function, given a previous state and action, it does:

const INITIAL_STATE = {
  all: [],
  post: null
};

export default function(state = INITIAL_STATE, action) {

  switch(action.type) {
    case FETCH_POSTS:
      return { ...state, all: action.payload.data };
    default:
      return state;
  }
}

You can check http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html — Altrim, Apr 09 '17 at 18:35
Possible duplicate of http://stackoverflow.com/questions/42811882/what-is-the-meaning-of-this-syntax-x-in-reactjs — Jagrati, Apr 09 '17 at 18:43
Possible duplicate of http://stackoverflow.com/questions/31048953/what-does-the-three-dots-in-react-do — Mayank Shukla, Apr 09 '17 at 19:14

score 4 · Answer 1 · answered Apr 09 '17 at 19:13

4

Technically, this is the same as calling:

return Object.assign({}, state, {all: action.payload.data});

It means that the resulting object:

is not the original object
it contains all properties from state
it contains a new value for property all.

answered Apr 09 '17 at 19:13

Sulthan

128,090
22
218
270

score 1 · Answer 2 · answered Apr 09 '17 at 18:41

What return { ...state, all: action.payload.data }; does is to destructure the state to obtain all the properties in it and then return the object by modifying all only the object with key all

suppose in your case

state={
  all: [],
  post: null
};

then

...state will return you all:[], post:null as separate values. So with { ...state, all: action.payload.data } you are setting the value of all to be action.payload.data and returning the entire values wrapped as an object. In your case if action.payload.data = ["hello", "world"], it will return

{
    all: ["hello", "world"],
    post: null
}

What in JavaScript ES6, does `return { ...state, all: action.payload.data }` with that last additional property do?

2 Answers2