Redux Fundamentals

Connecting Redux to React – Updating Price and Quantity

Redux Fundamentals Videos ▶️ 

Updating Price and Quantity

I'm going to look at how to change the price and then you're going to change the quantity.

In action.js

export const ITEM_PRICE_UPDATED = "ITEM_PRICE_UPDATED";

export const updatePrice = (uuid, price) => {
  return {
    type: ITEM_PRICE_UPDATED,
    payload: {
      uuid,
      price,
    },
  };
};

In reducer.js:

if (action.type === ITEM_PRICE_UPDATED) {
  return state.map((item) => {
    if (item.uuid !== action.payload.uuid) return item;
    return { ...item, price: action.payload.price };
  });
}

In MenuItemContainer.js:

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    remove: () => dispatch(removeItem(ownProps.uuid)),
    updatePrice: (price) => dispatch(updatePrice(ownProps.uuid, price)),
  };
};

Exercise

Can you get the quantity to update as well? (You can view the solution here.)