How to add object into array with ES6 ... method ?

Question

I know how to do with push method:

import * as types from '../constants/ActionTypes'

const initialState = {
  designBox: [],

}

import * as types from '../constants/ActionTypes'
const initialState = {
  designBox: [],

}

export default function(state = initialState, action) {
  switch (action.type) {
  case types.CREATE_DESIGN_BOX:
    let newState = Object.assign({}, state);
    newState.designBox.push(action.payload)
    return newState

  default:
    return state
  }
}

But I don't know how to do with ... method

Now my code has problem, The designBox can't add objects,
it only has one item, because it just overwritten by new action.payload

import * as types from '../constants/ActionTypes'

const initialState = {
  designBox: [],

}

export default function(state = initialState, action) {
  switch (action.type) {
  // action.payload format -> { width:200,height:300,text:'abc'}
  case types.CREATE_BOX:
    return {
      ...state,
      designBox: [action.payload]
    }
  default:
    return state
  }
}

How can I do this with ... method ??

Scarysize · Accepted Answer · 2016-10-03 09:37:53Z

3

Spread the the array as well:

return {
  ...state,
  designBox: [...state.designBox, action.payload]
}

Also, your state doesn't need to be an object. If it only contains an array just make it an array:

const initialState = [];

answered Oct 3, 2016 at 9:37

Scarysize

4,31130 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2492364 Over a year ago

Is it a common way the initialState is array not object??

Scarysize Over a year ago

If it only has one key which has an array as an value anyway, then there is no reason to nest the stuff you want to access later a level deeper than necessary.

StateLess · Accepted Answer · 2016-10-03 09:36:22Z

0

Use array destructor

case types.CREATE_BOX:
    return {
      ...state,
      designBox: [...state.designBox,action.payload]
    }

answered Oct 3, 2016 at 9:36

StateLess

5,4023 gold badges22 silver badges30 bronze badges

Comments

Ryan Brunner · Accepted Answer · 2016-10-03 09:36:51Z

0

There's no way using object spread to manipulate keys, only replace them entirely. You can however refer to the original object when you're overriding keys:

return {
  ...state,
  designBox: state.designBox.concat(action.payload)
}

answered Oct 3, 2016 at 9:36

Ryan Brunner

14.9k1 gold badge38 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to add object into array with ES6 ... method ?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related