ES6 ...メソッドで配列にオブジェクトを追加するには？

Question

私がプッシュ方式で行う方法を知っている：

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 
    } 
} 

しかし、私は今、自分のコードに問題がある...方法

をどうするのか分からない、designBoxは、オブジェクトを追加することはできません、
それはちょうど私が...方法これを行うことができますどのように新しい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 
    } 
} 

によって上書きので、それだけで、一つのアイテムを持っています？

Answer 1

スプレッド：

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

はまた、あなたの状態がオブジェクトである必要はありません。配列だけが含まれている場合は、配列にしてください：

const initialState = []; 

Answer 2

使用アレイデストラクタ

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

Answer 3

はそれらを完全に置き換える、キーを操作するためのオブジェクトの広がりを使用して方法はありません。あなたが鍵をオーバーライドしているときは、しかし、元のオブジェクトを参照することができますだけでなく、配列

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