Codecademy Store Redux API project not rendering

Get Help
1

I have tried everything I can think of but I cannot for the life of me figure out why this is not rendering. Was hoping someone could shed some light on this, I feel that I am missing something obvious but I can’t see it. I will post all the files we worked on in the project so that you can see them all. Any insight here is much appreciated…

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;
    }
  }
};


import { createStore, combineReducers } from "redux";

import { inventoryReducer } from "../features/inventory/inventorySlice.js";
import { cartReducer } from "../features/cart/cartSlice.js";
import { currencyFilterReducer } from "../features/currencyFilter/currencyFilterSlice.js";
import { searchTermReducer } from "../features/searchTerm/searchTermSlice.js";

export const store = createStore(
  combineReducers({
    inventory: inventoryReducer,
    cart: cartReducer,
    currencyFilter: currencyFilterReducer,
    searchTerm: searchTermReducer,
  })
);


import React from "react";
import ReactDOM from "react-dom";

import { App } from "./app/App.js";
import { store } from "./app/store.js";

const render = () => {
  ReactDOM.render(
    <App state={store.getState()} dispatch={store.dispatch} />,
    document.getElementById("root")
  );
};
render();
store.subscribe(render);


import React from "react";

import { Inventory } from "../features/inventory/Inventory.js";
import { CurrencyFilter } from "../features/currencyFilter/CurrencyFilter.js";
import { Cart } from "../features/cart/Cart.js";
import { SearchTerm } from "../features/searchTerm/SearchTerm.js";

// Render the Cart component below <Inventory />
export const App = (props) => {
  const { state, dispatch } = props;

  return (
    <div>
      <CurrencyFilter
        currencyFilter={state.currencyFilter}
        dispatch={dispatch}
      />

      <SearchTerm searchTerm={state.searchTerm} dispatch={dispatch} />

      <Inventory
        inventory={state.inventory}
        currencyFilter={state.currencyFilter}
        dispatch={dispatch}
      />

      <Cart
        cart={state.cart}
        currencyFilter={state.currencyFilter}
        dispatch={dispatch}
      />
    </div>
  );
};


export const searchTermReducer = (state = initialState, action) => {
  switch (action.type) {
    case "searchTerm/setSearchTerm": {
      const newTerm = action.payload;
      return newTerm;
    }
    case "searchTerm/clearSearchTerm":
      {
        return "";
      }
      return state;
  }
};

export const setSearchTerm = (term) => {
  type: "searchTerm/setSearchTerm";
  payload: term;
};

export const clearSearchTerm = () => {
  type: "searchTerm/clearSearchTerm";
};

Thanks in advance…

2

I don’t know if it will solve your problem, but some issues in the last snippet may be:

  • In the switch statement in searchTermReducer, you have return state; . I think you meant to nest that statement under a default: clause.

  • In setSearchTerm and clearSearchTerm, I think your intention is to do an implicit return of an object. Within the objects, you have semi-colons instead of commas. Also, returning an object in an arrow function requires a bit of care.

// You wrote:
export const setSearchTerm = (term) => {
  type: "searchTerm/setSearchTerm";
  payload: term;
};

export const clearSearchTerm = () => {
  type: "searchTerm/clearSearchTerm";
};
_________________________________________
// Explicit Return
export const setSearchTerm = (term) => {
  return {
      type: "searchTerm/setSearchTerm",
      payload: term
    };
};

export const clearSearchTerm = () => {
    return { type: "searchTerm/clearSearchTerm" };
};

___________________________________________
// Implicit Return
export const setSearchTerm = (term) => ({
      type: "searchTerm/setSearchTerm",
      payload: term
});


export const clearSearchTerm = () => (
    { type: "searchTerm/clearSearchTerm" }
);

Regarding implicit/explicit returns of objects from arrow functions, see:

1 Like
3

OOF! Massive oversight, thank you. This solved the problem with the onChange handler thank you. I have a few more bugs to figure out but this was an annoying one. Thank you again…

I kept getting an error that said “expected semicolon” and of course it was because I did not return it the object. Much appreciated…

1 Like