Codecademy store - Help understanding object[name] and useEffect

I am doing the Codecademy excercise: https://www.codecademy.com/courses/learn-redux/projects/codecademy-store

Could someone please help me understand these concepts? Please also link the reading material if possible.

  1. obj[name] - 1st set of code
  2. useEffect(callbackFunction, [dispatch]) - 2nd set of code
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];

      // Create a copy of itemToUpdate and update the quantity prop.
      const updatedItem = {
        ...itemToUpdate, 
        quantity: newQuantity
      }
      // Return a copy of the cart with the updatedItem included.
      return {
        ...cart, 
        [name]: updatedItem
      };
    }
    default: {
      return cart;
    }
  }
};

export const Inventory = ({ inventory, currencyFilter, dispatch }) => {
const onMount = () => {
dispatch(loadData());
};
useEffect(onMount, [dispatch]);

I know that you can access an object's property by calling object.name (dot notation) or object['name'] (bracket notation), but in the code, it is cart[name] (no quotation marks). In the excercise, cart is defined as an object, as in the code below. 

cart: {
‘Hat’: { price: 15.99, quantity: 0 },
‘T-Shirt’: { price: 15.99, quantity: 2 },
‘Hoodie’: { price: 18.99, quantity: 1 },
}

With useEffect, I understand the code wants to re-dispatch the onMount function whenever there is a change in dispatch but I don't know why we have to do that. Why can't we just load the inventory on the first render because the inventory doesn't change when users add item to cart, like this? 

`useEffect(onMount, []).` 

Your help is much appreciated. Cheers
  1. obj[name] You leave off the brackets when you are accessing an object dynamically, i.e., you use a variable because you don’t know what the string literal is going to be ahead of time. You want the cart/addItem to work no matter which name is passed into it.

  2. Which task in the instructions are you writing the useEffect() for?