React结合Redux开发电影购票商城加购功能失效如何解决

• 问题1：加入购物车的dispatch调用错误
  电影详情页的CartHandler函数中，你直接dispatch了从redux取出的addToCardProduct状态值，而不是调用AddProduct action creator传入要添加的商品数据。
  修复后的CartHandler：

  // add to cart Handler
  const CartHandler = () => {
    // 把电影信息和选择的数量一起传给action
    dispatch(AddProduct({
      ...singleMovie,
      buyQuantity: quantity
    }));
  }
  

• 问题2：购物车reducer初始状态缺失字段
  AddMovieToCart reducer的初始状态里没有定义products数组，直接展开state.products会导致报错。同时这个reducer不需要共用全局的initialState，单独定义专属初始状态即可，而且原有逻辑只固定加1数量，不符合用户选择多购票的需求：
  修复后的购物车reducer：

  // Add to card and Quantity reducers
  const cartInitialState = {
    quantity: 0,
    products: []
  }
  export const AddMovieToCart = (state = cartInitialState, action) => {
          switch (action.type) {
              case ActionsTypes.ADD_PRODUCT :
                  return {
                    ...state, 
                    // 累加用户选择的购票数量
                    quantity: state.quantity + action.payload.buyQuantity, 
                    products:[...state.products,action.payload]
                  };
              default : 
                  return state;
          }
  }
  

• 问题3：导航栏取值路径错误、购物车数量写死
  你合并reducer时把购物车状态放在了addToCart字段下，所以取值路径错误，同时Badge的数量写死为0没有绑定状态：
  修复后的Navbar组件：

  const Navbar = () => {
      // 修正状态取值路径
      const quantityBag = useSelector((state)=> state.addToCart.quantity);
      return (
          <nav className="navBar-section">
              <Link to="/">
                  <div className="logo-container">
                      <img className="logo" src="./Pictures/warner-bros.png" alt="Logo"/>
                  </div>
              </Link>
              {/* 绑定动态购物车数量 */}
              <Badge badgeContent={quantityBag} color="primary">
                   <LocalMall className="icon-bag" />
              </Badge>
          </nav>
      )
  }
  

• 问题4：语法错误与未定义变量

  1. 电影详情页的axios请求模板字符串缺失闭合反引号，修复为：

  const request = await axios.get(`https://api.themoviedb.org/3/movie/${movieId}`);
  

  2. 海报路径用到的ImgPath变量未定义，你需要提前定义TMDB的图片前缀，比如：

  const ImgPath = 'https://image.tmdb.org/t/p/w500'
  

内容的提问来源于stack exchange，提问作者TheRealJohnDoe