Mise à jour d'une seule propriété d'objet dans un tableau d'objets basé sur la valeur actuelle avec redux

Question

Dans mon état, j'ai un tableau d'objets qui ont quelques propriétés descriptives, une quantité et un identifiant unique. Les données contenues dans cet objet proviennent d'une réponse API, et dans mon créateur d'actions, je vérifie l'état pour voir s'il existe déjà et si oui, envoie une action d'incrémentation pour mon réducteur. C'est ce que mon créateur d'action ressemble à:

export const getProductDetails = upc => (dispatch, getState) => { 
const state = getState(); 
const products = state.table.products; 
if (_find(products, upc) !== undefined) { 
    dispatch({ type: INCREMENT_QUANTITY, payload: upc }); 
} else { 
axios 
    .post(<--POST TO ENDPOINT-->) } 
    }) 
    .then(res => { 
    dispatch({ type: POST_UPC, payload: res.data }); 
    }) 
    .catch(err => { 
    errorHandler(dispatch, err.response, AUTH_ERROR); 
    }); 
} 
}; 

Mon réducteur pour ce cas semble est structuré comme si:

case INCREMENT_QUANTITY: 
    return { 
    ...state, 
    products: state.products.map(product => { 
     action.payload === product.upc 
     ? { ...product, quantity: product.quantity + 1 } 
     : product; 
    }) 
    }; 

I sur la base de cette logique de réducteur de ce this excellent response, mais pour une raison quelconque lorsque la une action est envoyée, le produit en double est remplacé par null au lieu d'incrémenter la quantité comme prévu. J'essaie toujours d'apprendre le redux en ce moment, alors pardonnez mon ignorance. Idéalement, je voudrais éviter d'apporter une bibliothèque ou un paquet juste pour incrémenter une valeur. Qu'est-ce qui me manque dans mon réducteur?

Answer 1

Vous ne retournez rien dans votre callback map, vous créez un bloc et vous n'obtenez pas le résultat escompté. Au lieu de cela, omettre les crochets { … }:

products: state.products.map(product => 
    action.payload === product.upc 
    ? { ...product, quantity: product.quantity + 1 } 
    : product; 
); 

Cela utilisera la syntaxe de la fonction flèche pour revenir implicitement le résultat de l'opérateur ternaire.