Redux увеличивает количество в корзине

Question

Я борюсь с функцией моего редуктора, чтобы добавить товар и увеличить его количество, если оно уже есть в корзине.Пока что мой код добавляет другое «количество» с 1 вместо обновления количества, уже присутствующего в моем состоянии.

Вот мой код:

редуктор:

import { ADD_TO_CART } from "../actions/types";

export default function(state = [], action) {
  switch (action.type) {
    case ADD_TO_CART:
      if (state.findIndex(el => el.item.title === action.item.title) === -1) {
       return [...state, { item: action.item, quantity: action.quantity + 1 }];
  } else {
    return [...state, { quantity: action.quantity + 1 }];
  }
default:
  return state;
  }
}

действие:

 import { ADD_TO_CART } from "./types";
 import axios from "axios";

 export const addToCart = id => dispatch => {
   axios
     .get(`https://api.itbook.store/1.0/search/${id}`)
     .then(items =>
       items.map((item, quantity) =>
         dispatch({
           type: ADD_TO_CART,
           item,
           quantity
         })
       )
);
 };

Спасибо

Answer 1

import { ADD_TO_CART } from "../actions/types";

export default function (state = [], action) {
  switch (action.type) {
    case ADD_TO_CART:
      const index = state.findIndex(el => el.item.title === action.item.title);
      if (index > -1) {
        const newState = [...state];
        newState[index] = { ...newState[index], quantity: action.quantity + 1 };
        return newState;
      } else {
        return [...state, { ...action.item, quantity: action.quantity + 1 }];
      }
    default:
      return state;
  }
}

Answer 2

Вы находите индекс (что замечательно), но ничего с ним не делаете (что не так здорово):

import { ADD_TO_CART } from "../actions/types";

export default function(state = [], action) {
  switch (action.type) {
    case ADD_TO_CART:
      const index = state.findIndex(el => el.item.title === action.item.title);
      if (index === -1) {
       return [...state, { item: action.item, quantity: action.quantity + 1 }];
      } else {
        // Use map to create a new state object 
        return state.map((item, i) => 
            index === i //Only modify the found index
            ? { ...item, quantity: item.quantity + action.quantity }  //Add the required quantity to the current quantity (not too sure about this)
            : item //Don't modify other items
        );
      }
     default:
       return state;
  }
}