idをreduxストアの配列に追加するには？

Question

私は、次の減速を持っている：

このようなアクションを派遣しようとすると

const initialState = { 
    items: [], 
    cartOpen: false, 
    total: 0 
} 

const Cart = (state = initialState, action) => { 
    switch (action.type) { 
     case 'ADD_TO_CART': 
      return [...state.items,action.payload] 

     default: 
      return state 
    } 
} 

：

store.dispatch({type: 'ADD_TO_CART', payload: 22}); 

にはどうすればいいのアイテム配列へのidであるペイロードをプッシュすることができますか？

Answer 1

あなたの減速は、状態、使用Object.assignまたはspread operator ... はあなたのコードは次のようになりますを変異させずにオブジェクトを返すために、配列でないオブジェクトを返します。

const initialState = { 
    items: [], 
    cartOpen: false, 
    total: 0 
} 

const Cart = (state = initialState, action) => { 
    switch (action.type) { 
     case 'ADD_TO_CART': 
      return Object.assign({} , state, { 
       items : [...state.items,action.payload] 
      }) 

     default: 
      return state 
    } 
} 

ターゲットブラウザはObject.assignをサポートしていないか、あなたは私がpollyfill

const initialState = { 
    items: [], 
    cartOpen: false, 
    total: 0 
} 

const Cart = (state = initialState, action) => { 
    switch (action.type) { 
    case 'ADD_TO_CART': 
    return { ...state, { 
     items : [...state.items , action.payload] 
    }) 
    default: 
     return state 
    } 
} 

Answer 2

を必要としないあなたが作ることができると思いスプレッド演算子を使用することができればpollyfillを使用してくださいimmutability-helperライブラリを使用して状態を変更します。それに対する一つの付加的な利点は、それが簡単にあなたが簡単にあなたの状態に

import update from 'immutability-helper'; 
const initialState = { 
    items: [], 
    cartOpen: false, 
    total: 0 
} 

const Cart = (state = initialState, action) => { 
    switch (action.type) { 
     case 'ADD_TO_CART': 
      return update(state, { 
       items: { 
        $push: action.payload 
       } 
      }) 

     default: 
      return state 
    } 
} 

object.assignスニペットは、私の作品

Docs