Wie ID zum Array in Redux speichern hinzufügen?

Question

Ich habe folgendes Minderer:

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

Der Versuch, eine Aktion wie diese versenden:

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

Wie kann ich die Nutzlast schieben, die eine ID Element-Array ist?

Answer 1

Ihre Minderer gibt ein Array kein Objekt ein Objekt zurückzukehren, ohne den Zustand Verwendung mutiert Object.assign oder die spread operator ... Ihr Code sollte wie folgt aussehen.

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

stellen Sie sicher, eine pollyfill, wenn Ihr Ziel-Browser Object.assign oder Sie könnten die Ausbreitung Operator nicht unterstützt verwenden, die ich denke, ein 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

Sie machen es nicht erforderlich ist Verwenden Sie die Bibliothek immutability-helper, um Änderungen an Ihrem Status vorzunehmen. Ein zusätzlicher Vorteil ist, dass es wird es Ihnen leicht machen, Änderungen an das tief verschachtelte Objekt in Ihrem Staat zu machen leicht

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

Docs