构建一个基于React和Redux的简易电商购物车应用

简介: 构建一个基于React和Redux的简易电商购物车应用

在这个教程中,我们将构建一个基于React和Redux的简易电商购物车应用。这个应用将允许用户浏览商品列表,将商品添加到购物车,以及查看和更新购物车中的商品数量。


  1. 设置项目

首先,使用create-react-app创建一个新的React项目,并安装Redux及其相关依赖:

npx create-react-app shopping-cart-app
cd shopping-cart-app
npm install redux react-redux redux-thunk


  1. 创建Redux Store和Actions

src目录下创建redux文件夹,并在其中创建store.jsactions.jsreducers.js文件。

store.js (Redux Store配置)

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

actions.js (定义Actions)

export const ADD_TO_CART = 'ADD_TO_CART';
export const REMOVE_FROM_CART = 'REMOVE_FROM_CART';
export const UPDATE_CART_ITEM_QUANTITY = 'UPDATE_CART_ITEM_QUANTITY';
export function addToCart(product) {
  return {
    type: ADD_TO_CART,
    payload: product,
  };
}
export function removeFromCart(productId) {
  return {
    type: REMOVE_FROM_CART,
    payload: productId,
  };
}
export function updateCartItemQuantity(productId, quantity) {
  return {
    type: UPDATE_CART_ITEM_QUANTITY,
    payload: { productId, quantity },
  };
}

reducers.js (定义Reducers)

import { ADD_TO_CART, REMOVE_FROM_CART, UPDATE_CART_ITEM_QUANTITY } from './actions';
const initialState = {
  cart: [],
};
function cartReducer(state = initialState.cart, action) {
  switch (action.type) {
    case ADD_TO_CART:
      // 简化处理,假设每个商品只有一个实例在购物车中
      const existingItem = state.find((item) => item.id === action.payload.id);
      if (existingItem) {
        return state.map((item) =>
          item.id === action.payload.id ? { ...item, quantity: item.quantity + 1 } : item
        );
      }
      return [...state, { ...action.payload, quantity: 1 }];
    case REMOVE_FROM_CART:
      return state.filter((item) => item.id !== action.payload);
    case UPDATE_CART_ITEM_QUANTITY:
      return state.map((item) =>
        item.id === action.payload.productId ? { ...item, quantity: action.payload.quantity } : item
      );
    default:
      return state;
  }
}
export default {
  cart: cartReducer,
};
// 组合reducers
export const rootReducer = (state = {}, action) => {
  return {
    cart: cartReducer(state.cart, action),
  };
};


  1. 创建React组件

src/components目录下创建ProductList.jsProduct.jsCart.jsCartItem.js等组件。

ProductList.js (展示商品列表)

// ... 省略import语句和样式
function ProductList({ products, addToCart }) {
  return (
    <div>
      <h2>商品列表</h2>
      <ul>
        {products.map((product) => (
          <Product key={product.id} product={product} addToCart={addToCart} />
        ))}
      </ul>
    </div>
  );
}
// ... 省略export语句

Product.js (单个商品组件)

// ... 省略import语句和样式
function Product({ product, addToCart }) {
  return (
    <li>
      <h3>{product.name}</h3>
      <p>{product.price}</p>
      <button onClick
={() => addToCart(product)}>添加到购物车</button>
    </li>
  );
}
// ... 省略export语句

Cart.js (购物车组件)

// ... 省略import语句和样式
function Cart({ cart, removeFromCart, updateCartItemQuantity }) {
  return (
    <div>
      <h2>购物车</h2>
      {cart.length === 0 ? (
        <p>购物车为空</p>
      ) : (
        <ul>
          {cart.map((item) => (
            <CartItem
              key={item.id}
              item={item}
              removeFromCart={removeFromCart}
              updateCartItemQuantity={updateCartItemQuantity}
            />
          ))}
        </ul>
      )}
    </div>
  );
}
// ... 省略export语句和connect函数(如果使用react-redux的connect)

CartItem.js (购物车商品项组件)

// ... 省略import语句和样式
function CartItem({ item, removeFromCart, updateCartItemQuantity }) {
  return (
    <li>
      <h3>{item.name}</h3>
      <p>数量: {item.quantity}</p>
      <p>单价: {item.price}</p>
      <p>总价: {item.price * item.quantity}</p>
      <button onClick={() => removeFromCart(item.id)}>删除</button>
      <button onClick={() => updateCartItemQuantity(item.id, item.quantity - 1)} disabled={item.quantity === 1}>
        -
      </button>
      <button onClick={() => updateCartItemQuantity(item.id, item.quantity + 1)}>+</button>
    </li>
  );
}
// ... 省略export语句和connect函数(如果使用react-redux的connect)


  1. 集成Redux到组件

使用react-reduxconnect函数或者新的Hooks API(如useSelectoruseDispatch)将Redux的state和actions集成到组件中。


  1. 渲染购物车和商品列表

src/App.js中,使用Redux的Provider包裹整个应用,并渲染购物车和商品列表组件。

// ... 省略import语句
function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <ProductList /* ... 传递props */ />
        <Cart /* ... 传递props */ />
      </div>
    </Provider>
  );
}
export default App;


  1. 启动并测试应用

启动你的React应用,并测试购物车功能是否按预期工作。


  1. 样式和布局

使用CSS或CSS框架(如Bootstrap)来美化你的应用,并调整布局以提供更好的用户体验。


  1. 扩展功能(可选)
  • 用户认证:添加用户登录和注册功能,以便用户可以保存他们的购物车和购买历史。
  • 商品详情页:为每个商品创建一个单独的详情页,显示更多关于商品的信息和图片。
  • 支付和订单处理:集成支付网关,并处理订单生成、发货和跟踪。
  • 推荐系统:根据用户的购买历史和浏览行为推荐相关商品。
  • 折扣和促销活动:添加折扣券、打折商品和限时促销活动等功能。

这个教程提供了一个基于React和Redux的简易电商购物车应用的起点。你可以根据自己的需求进一步扩展和定制它。

目录
相关文章
|
4天前
|
存储 前端开发 JavaScript
深入浅出React框架:构建高效组件化网页的实战指南
【7月更文挑战第9天】在当今快速发展的前端技术领域,React凭借其强大的组件化思想、高效的虚拟DOM以及丰富的生态系统,成为了构建动态用户界面的首选框架之一。本文将带你深入浅出地探索React的核心概念,并通过实战示例,展示如何利用React构建高效、可维护的组件化网页。
38 8
|
1月前
|
前端开发 JavaScript Linux
分离前后端react和django3构建的应用
【6月更文挑战第4天】在本文中,我们介绍了如何设置React前端并连接到Django后端。并讨论了前后端分离的好处,并计划扩展API以支持更多HTTP操作和用户身份验证功能。
59 5
分离前后端react和django3构建的应用
|
8天前
|
Web App开发 JavaScript 前端开发
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
22 0
|
2月前
|
前端开发 JavaScript API
使用React和GraphQL构建一个简单的博客应用
使用React和GraphQL构建一个简单的博客应用
31 1
|
1月前
|
Python API 前端开发
使用react和django3构建应用
【6月更文挑战第3天】首先,创建Django项目和todos应用,安装必要依赖,配置settings.py并建立数据库模型。通过makemigrations和migrate更新数据库。接着,设置REST_FRAMEWORK的权限为AllowAny,构建API的urls, views, serializers。在todos应用中定义ListTodo和DetailTodo视图,以及TodoSerializer。对于跨域资源共享(CORS),通过django-cors-headers中间件配置白名单。
28 0
|
2月前
|
存储 JavaScript 前端开发
基于React和Redux的待办事项列表应用
基于React和Redux的待办事项列表应用
38 0
|
11月前
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
49 0
|
11月前
|
前端开发
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之8
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之7
35 0
|
2月前
|
前端开发 JavaScript
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
43 1
|
8月前
|
前端开发
前端笔记:React的form表单全部置空或者某个操作框置空的做法
在React框架前端开发中,经常会有弹出框的开发,涉及到弹出框,难免就会有表单。一般在关闭弹出框或者对表单联动时,往往都需要考虑对表单进行置空操作了。
66 0