"Learn Redux" - "Codecademy Store"

I’m working my way through the “Learn Redux” course. I’m stuck on step 15 of the “Codecademy Store” project. Changing the quantity of an item in the cart isn’t updating the total. It doesn’t look like the action is being dispatched for some reason.

Link: https://www.codecademy.com/courses/learn-redux/projects/codecademy-store

I am indeed having the same problem. I checked with the walk through video and my code is the exact same as in the example. Still, I’m unable to change the quantity of the items in the cart, no idea why.

Same problem here. Don’t know what to do

Hey guys, I am also having this issue. Everything works except for the updateQuantity. Here is my code.

CartSlice.js

export const addItem = (itemToAdd) => {
  return {
    type: 'cart/addItem',
    payload: itemToAdd,
  };
};

export const changeItemQuantity = (name, newQuantity) => {
   return {
     type: 'cart/changeItemQuantity',
     payload: { name, newQuantity }
   }
}

const initialCart = {};
export const cartReducer = (cart = initialCart, action) => {
  switch (action.type) {
    case 'cart/addItem': {
      const { name, price } = action.payload;

      // if the item already exists, increase the quantity by 1, otherwise set it to 1
      const quantity = cart[name] ? cart[name].quantity + 1 : 1;
      const newItem = { price, quantity };

      // Add the new item to the cart (or replace it if it existed already)
      return { 
        ...cart, 
        [name]: newItem 
      };
    }
    case 'cart/changeItemQuantity': {
      const { name, newQuantity } = action.payload;
      const itemToUpdate = cart[name];
      const updatedItem = {
        ...itemToUpdate,
        quantity: newQuantity
      };
      return {
        ...cart,
        [name]: updatedItem
      };
    }
    default: {
      return cart;
    }
  }
};

Cart.js

import React from 'react';
import {
  calculateTotal,
  getCurrencySymbol,
} from '../../utilities/utilities.js';

import changeItemQuantity from './cartSlice.js';

export const Cart = (props) => {
  const { cart, currencyFilter, dispatch } = props;

  const onInputChangeHandler = (name, input) => {
    // If the user enters a bad value...
    if (input === '') {
      return;
    }

    // Otherwise, convert the input into a number and pass it along as the newQuantity.
    const newQuantity = Number(input);

    // Dispatch an action to change the quantity of the given name and quantity.
    dispatch(changeItemQuantity(name, newQuantity));
  };

  // Use the cart and currencyFilter slices to render their data.
  const cartElements = [];
  const total = calculateTotal(cart, currencyFilter);

  for (let itemName in cart) {
    cartElements.push(createCartItem(itemName));
  }

  return (
    <div id="cart-container">
      <ul id="cart-items">{cartElements}</ul>
      <h3 className="total">
        Total{' '}
        <span className="total-value">
          {getCurrencySymbol(currencyFilter)}{total} {currencyFilter}
        </span>
      </h3>
    </div>
  );

  function createCartItem(name) {
    const item = cart[name];

    if (item.quantity === 0) {
      return;
    }

    return (
      <li key={name}>
        <p>{name}</p>
        <select
          className="item-quantity"
          value={item.quantity}
          onChange={(e) => {
            onInputChangeHandler(name, e.target.value);
          }}
        >
          {[...Array(100).keys()].map((_, index) => (
            <option key={index} value={index}>
              {index}
            </option>
          ))}
        </select>
      </li>
    );
  }
};

Maybe we could compare codes and see if there’s errors we’re missing in the video

I can’t seem to find the issue, but it usually turns out to be a semi-colon that should be a comma or something stupid like that. An extra set of eyes always helps.

Ha, well, I actually just figured mine out. As I said, usually something stupid. This was my issue, missing the curly braces on import.

import { changeItemQuantity } from './cartSlice.js';

I still don’t see how using Redux was more practical than just using the useState hook for this project