react购物车Redux

于 2024-09-04 09:16:37 发布
阅读量492 收藏
点赞数 1
文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48341937/article/details/141883834
版权

入口index.js

import React from 'react'
import {createRoot} from 'react-dom/client'

import App from './App'
//注入store
import {Provider} from "react-redux";
import store from "./store";

const root = createRoot(document.getElementById('root'))
root.render(
    <Provider store={store}>
        <App/>
    </Provider>
)

srotre/modules/takeway.js

//编写store
import {createSlice} from "@reduxjs/toolkit";
import axios from "axios";

const foodsStore = createSlice({
    name: 'foods',
    initialState: {
        //商品列表
        foodsList: [],
        //菜单激活的下标值
        activeIndex: 0,
        // 购物车列表
        cartList: []
    },
    reducers: {
        // 更改商品列表
        setFoodsList(state, action) {
            state.foodsList = action.payload
        },
        // 更改activeIndex
        changActiveIndex(state, action) {
            state.activeIndex = action.payload
        },
        //添加购物车
        addCart(state, action) {
            //是否添加过  如果添加只更新count 没有添加过 直接push进去
            const data = JSON.parse(JSON.stringify(state.cartList))
            const item = data
                .find(item => item.id === action.payload.id)
            const index = data.findIndex(item => item.id === action.payload.id)
            console.log(item)
            if (item) {
                state.cartList[index].count++
            } else {
                state.cartList.push(action.payload)
            }

        },
        //count增加
        addCount(state, action) {
            const data = JSON.parse(JSON.stringify(state.cartList))
            const item = data
                .find(item => item.id === action.payload.id)
            const index = data.findIndex(item => item.id === action.payload.id)
            state.cartList[index].count++

        },
        //count--
        decreCount(state, action) {
            const data = JSON.parse(JSON.stringify(state.cartList))
            const item = data.find(item => item.id === action.payload.id)
            const index = data.findIndex(item => item.id === action.payload.id)
            if (state.cartList[index].count === 0) {
                return
            }
            state.cartList[index].count--

        },
        // 清除购物车
        clearCart (state) {
            state.cartList = []
        }
    }
})
//异步获取部分 结构出创建action对象
const { setFoodsList, changActiveIndex, addCart, addCount, decreCount, clearCart } = foodsStore.actions
console.log(foodsStore.actions, 11111111111)
const fetchChannelList = () => {
    console.log('123')
    return async (dispatch) => {
        console.log('编写异步逻辑')
        // 编写异步逻辑
        const res = await axios.get('http://localhost:3004/takeaway')
        // 调用dispatch函数提交action
        dispatch(setFoodsList(res.data))
    }
}
export { fetchChannelList, changActiveIndex, addCart, addCount, decreCount, clearCart }
//获取reducer函数
const reducer = foodsStore.reducer

export default reducer

srotre/modules/index.js

import foodsReducer from './modules/takeaway'
import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
    reducer: {
        foods: foodsReducer
    }
})

export default store

Menus/index.js

import classNames from 'classnames'
import './index.scss'
import {useDispatch, useSelector} from "react-redux";
import {changActiveIndex} from "../../store/modules/takeaway";

const Menu = () => {
    // const foodsList = [
    //   {
    //     "tag": "318569657",
    //     "name": "一人套餐",
    //     "foods": [
    //       {
    //         "id": 8078956697,
    //         "name": "烤羊肉串(10串)",
    //         "like_ratio_desc": "好评度100%",
    //         "month_saled": 40,
    //         "unit": "10串",
    //         "food_tag_list": ["点评网友推荐"],
    //         "price": 90,
    //         "picture": "https://zqran.gitee.io/images/waimai/8078956697.jpg",
    //         "description": "",
    //         "tag": "318569657"
    //       },
    //       {
    //         "id": 7384994864,
    //         "name": "腊味煲仔饭",
    //         "like_ratio_desc": "好评度81%",
    //         "month_saled": 100,
    //         "unit": "1人份",
    //         "food_tag_list": [],
    //         "price": 39,
    //         "picture": "https://zqran.gitee.io/images/waimai/7384994864.jpg",
    //         "description": "",
    //         "tag": "318569657"
    //       },
    //       {
    //         "id": 2305772036,
    //         "name": "鸡腿胡萝卜焖饭",
    //         "like_ratio_desc": "好评度91%",
    //         "month_saled": 300,
    //         "unit": "1人份",
    //         "food_tag_list": [],
    //         "price": 34.32,
    //         "picture": "https://zqran.gitee.io/images/waimai/2305772036.jpg",
    //         "description": "主料：大米、鸡腿、菜心、胡萝卜",
    //         "tag": "318569657"
    //       },
    //       {
    //         "id": 2233861812,
    //         "name": "小份酸汤莜面鱼鱼+肉夹馍套餐",
    //         "like_ratio_desc": "好评度73%",
    //         "month_saled": 600,
    //         "unit": "1人份",
    //         "food_tag_list": ["“口味好,包装很好～点赞”"],
    //         "price": 34.32,
    //         "picture": "https://zqran.gitee.io/images/waimai/2233861812.jpg",
    //         "description": "酸汤莜面鱼鱼，主料：酸汤、莜面 肉夹馍，主料：白皮饼、猪肉",
    //         "tag": "318569657"
    //       }
    //     ]
    //   }
    // ]
    const {foodsList, activeIndex} = useSelector(state => state.foods)
    const menus = foodsList.map(item => ({tag: item.tag, name: item.name}))
    const dispath = useDispatch()
    return (
        <nav className="list-menu">
            {/* 添加active类名会变成激活状态 */}
            {menus.map((item, index) => {
                return (
                    <div
                        onClick={() => dispath(changActiveIndex(index))}
                        key={item.tag}
                        className={classNames(
                            'list-menu-item',
                            activeIndex === index && 'active'
                        )}
                    >
                        {item.name}
                    </div>
                )
            })}
        </nav>
    )
}

export default Menu

FoodsItem.js

import './index.scss'
import { useDispatch } from 'react-redux'
import {addCart} from "../../../store/modules/takeaway";
const Foods = ({
  id,
  picture,
  name,
  unit,
  description,
  food_tag_list,
  month_saled,
  like_ratio_desc,
  price,
  tag,
  count
}) => {
  const dispatch = useDispatch()
  return (
    <dd className="cate-goods">
      <div className="goods-img-wrap">
        <img src={picture} alt="" className="goods-img" />
      </div>
      <div className="goods-info">
        <div className="goods-desc">
          <div className="goods-title">{name}</div>
          <div className="goods-detail">
            <div className="goods-unit">{unit}</div>
            <div className="goods-detail-text">{description}</div>
          </div>
          <div className="goods-tag">{food_tag_list.join(' ')}</div>
          <div className="goods-sales-volume">
            <span className="goods-num">月售{month_saled}</span>
            <span className="goods-num">{like_ratio_desc}</span>
          </div>
        </div>
        <div className="goods-price-count">
          <div className="goods-price">
            <span className="goods-price-unit">¥</span>
            {price}
          </div>
          <div className="goods-count">
            <span className="plus" onClick={() => dispatch(addCart({
              id,
              picture,
              name,
              unit,
              description,
              food_tag_list,
              month_saled,
              like_ratio_desc,
              price,
              tag,
              count
            }))}>+</span>
          </div>
        </div>
      </div>
    </dd>
  )
}

export default Foods

Cart.js

import classNames from 'classnames'
import Count from '../Count'
import './index.scss'
import {useDispatch, useSelector} from "react-redux";
import {addCount, clearCart, decreCount} from "../../store/modules/takeaway";
import {useState} from "react";

const Cart = () => {
    const {cartList} = useSelector(state => state.foods)
    const totalPrice = cartList.reduce((a, c) => a + c.price * c.count, 0)
    const totalCount = cartList.reduce((a, c) => a + c.count, 0)
    const dispatch = useDispatch()
    //控制购物车打开关闭的状态
    const [visible, setVisible] = useState(false)
    const onshow = () => {
        if (cartList.length > 0) {
            setVisible(true)
        }
    }
    // const cart = []
    return (
        <div className="cartContainer">
            {/* 遮罩层 添加visible类名可以显示出来 */}
            <div onClick={() => setVisible(false)}
                 className={classNames('cartOverlay', visible && 'visible')}
            />
            <div className="cart">
                {/* fill 添加fill类名可以切换购物车状态*/}
                {/* 购物车数量 */}
                <div onClick={onshow} className={classNames('icon')}>
                    {cartList.length && <div className="cartCornerMark">{totalCount}</div>}
                </div>
                {/* 购物车价格 */}
                <div className="main">
                    <div className="price">
            <span className="payableAmount">
              <span className="payableAmountUnit">¥</span>
                {totalPrice.toFixed(2)}
            </span>
                    </div>
                    <span className="text">预估另需配送费 ¥5</span>
                </div>
                {/* 结算 or 起送 */}
                {/* 结算 or 起送 */}
                {cartList.length > 0 ? (
                    <div className="goToPreview">去结算</div>
                ) : (
                    <div className="minFee">1元起送</div>
                )}
            </div>
            {/* 添加visible类名 div会显示出来 */}
            <div className={classNames('cartPanel', visible && 'visible')}>
                <div className="header">
                    <span className="text">购物车</span>
                    <span className="clearCart" onClick={() => dispatch(clearCart())}>
            清空购物车
          </span>
                </div>

                {/* 购物车列表 */}
                <div className="scrollArea">
                    {cartList.map(item => {
                        return (
                            <div className="cartItem" key={item.id}>
                                <img className="shopPic" src={item.picture} alt=""/>
                                <div className="main">
                                    <div className="skuInfo">
                                        <div className="name">{item.name}</div>
                                    </div>
                                    <div className="payableAmount">
                                        <span className="yuan">¥</span>
                                        <span className="price">{item.price}</span>
                                    </div>
                                </div>
                                <div className="skuBtnWrapper btnGroup">
                                    <Count
                                        count={item.count}
                                        onPlus={() => dispatch(addCount({id: item.id}))}
                                        onMinus={() => dispatch(decreCount({id: item.id}))}
                                    />
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        </div>
    )
}

export default Cart

不想努力的迪迪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React学习笔记四(redux和react-redux和Redux Toolkit)
kianagrow的博客
12-18 836
React学习笔记四(redux和react-redux和Redux Toolkit)
react react-redux基础购物车案例
weixin_42542616的博客
07-26 501
这个例子采用module范式： 结构： shopcart produts 商品模块 cart 购物车模块 store redux index.js 代码 produts 逻辑组件 //component for Products import React, { Component } from "react"; import { connect } from "react-redux"; import { asyncLoadData, decrementInventory } f
redux搭配react-redux实现简易购物车
lm13420109892的博客
04-06 567
1.创建reducer eg:./shopcarList/shopCarList.js const initState = [ //初始状态 { id: 1, name: "apple", allnum: 10, num: 0, remainnum:10, price: 5 }, { id: 2, name: "apple2", alln
React-Redux总结含购物车案例
前端开发工程师
10-23 672
React-Redux是一个用于在React应用中管理状态的第三方库。它是基于Redux架构的，提供了一种在React应用中高效管理状态的方式。React-Redux通过将Redux的核心概念和React组件相结合，使得在React应用中使用Redux变得更加简单和方便。
【React】Redux讲义
学无止境
03-25 743
Redux讲义 讲义说明 目的：为React移动端项目做支撑：redux、redux-thunk、react-redux（useDispatch、useSelector ）、redux-devtools-extension 内容顺序（课程目标）： redux单独使用 react-redux 结合react项目进行使用 中间件react-thunk的基本使用 useDispatch, useSelector的基本使用 redux模块管理 redux-devtools-extension Redux基本介绍
React 购物车案例 使用 react-redux 和 @reduxjs/toolkit 方法
shh4447的博客
08-24 216
React Redux是Redux的官方React UI 绑定层。它让您的 React 组件从 Redux 存储中读取数据，并将操作分派到存储以更新状态
react-redux的美团点餐加购物车案例
10-27
在React和Redux的世界里，构建一个美团点餐加购物车的案例可以让我们深入了解这两个库的协同工作原理。React是一个用于构建用户界面的JavaScript库，它专注于视图层，而Redux则是一个可预测化的状态管理工具，它使得...
react-redux.zip
07-31
这个"react-redux.zip"文件可能包含了实现点击添加购物车功能以及展示购物车数量总和的示例代码。让我们深入了解一下React-Redux的核心概念和如何实现这样的功能。 首先，React是Facebook开发的一个用于构建用户...
使用react-redux实现购物车功能
weixin_42787135的博客
02-24 1334
写在前面：好久没更了，这个习惯还是得捡起来。希望能坚持下去… 废话不多说，开始今天的内容。今天分享的内容是通过react-redux结合中间件redux-thunk实现购物车功能。 一、准备工作 首先我们应该先下载react-router-dom、redux、react-redux、redux-thunk 你可以通过yarn或者npm都可以。 举个栗子 cnpm install --save re...
【React】useEffect的使用场景与作用
Jerryqjr的博客
08-29 693
useEffect是 React 中的一个 Hook，用于在函数组件中执行副作用。副作用是指那些与渲染过程无关的操作，比如数据获取、订阅事件、手动操作 DOM、日志记录等。useEffect允许你在函数组件中引入这些副作用，而不必依赖于类组件的生命周期方法（如和。
React面试题
只会写bug
08-30 1124
答：React遵循的协议是“BSD许可证 + 专利开源协议”，这个协议比较奇葩，如果你的产品跟facebook没有竞争关系，你可以自由的使用react，但是如果有竞争关系，你的react的使用许可将会被取消。将传递给 setState 的对象合并到组件的当前状态，这将启动一个和解的过程，构建一个新的 react 元素树，与上一个元素树进行对比（ diff ），从而进行最小化的重渲染。第三个以及之后的参数，皆作为组件的子组件。新添加的属性会并入原有的属性，传入到返回的新元素中，而旧的子元素将被替换。
react中关于token的两个场景
weixin_66130560的博客
08-30 455
注意：在axios拦截器中无法使用react中的hook(以use开头的函数被称为hook)，所以无法使用useSelector拿到store中的token数据。在react项目中，路由跳转前需判断是否存在token，有则正常跳转，没有则去登录页面。对于每个axios请求，都需要在header添加上token数据。如你有问题或疑惑，欢迎在评论区写下，必将努力解答；如本文有误区，希望你不吝赐教，让我们共勉！
React应用中的状态管理：Redux vs Context API
官方推荐
09-01 3678
React应用中的状态管理：Redux vs Context API
【前端面试】采用react前后，浏览器-解析渲染UI的变化
hhhh
09-02 1436
浏览器解析和渲染 UI（用户界面），特别是 HTML 文档，是一个复杂的过程，涉及到多个阶段。
vue3如何监听reactive对象是哪个属性发生的变化
于坤
08-29 529
监听单个属性：使用监听特定属性的变化。监听整个对象：使用并结合deep: true深度监听整个对象，并手动检查哪些属性发生了变化。监听多个属性：可以通过数组或组合computed来监听多个属性的变化。使用toRefs：将reactive对象的属性转换为ref，然后分别进行监听。这些方法可以帮助你灵活地监听reactive对象中的属性变化，根据实际需求选择合适的方式。
在react中用three.js 渲染模型 在上面创建标签
最新发布
Mr_wuying的博客
09-03 453
在旋转的时候我给标签删除了。在回归到原位的时候才让标签显示出来。这里唯一的不同是我没有做到标签根据模型旋转然后标签跟着转动。可以给标签添加class 然后通过css来设置样式。如果要将标签跟随模型角度转动应该要将标签添加到模型上。
添加配置react组件路由具体步骤参考
HHX_01的博客
09-02 849
这样，你就完成了“学科管理”页面的创建和路由配置，使用TypeScript语法。当用户点击“学科素材”下的“学科管理”菜单项时，将会被导航到。属性定义了“学科素材”下的二级菜单项，这里只有一个“学科管理”项，但可以按照同样的格式添加更多二级菜单项。前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。数组中添加一个新的对象，该对象代表“学科素材”这个一级菜单项，并且包含一个。属性，该属性是一个数组，包含二级菜单项“学科管理”。然后，在你的路由配置文件中（假设你使用的是。
React 创建和嵌套组件
HHX_01的博客
09-03 840
React 组件是 React 应用程序的基本构建块。它是一个独立的、可复用的代码单元，描述了 UI 的一部分。组件可以是一个按钮、一个输入框，甚至是一个完整的页面。
react实现全选反选购物车
05-25
可以使用React的状态来实现全选反选购物车功能。 首先，你需要定义一个组件，例如 `ShoppingCart` 组件，它包含多个 `CartItem` 子组件。每个 `CartItem` 组件都有一个 `checked` 属性，表示该商品是否被选中。 在 `ShoppingCart` 组件中，需要定义一个 `selectedAll` 状态，表示是否全选。同时，还需要定义一个 `handleSelectAll` 函数，用于处理全选/反选功能。该函数将会通过 `onChange` 事件绑定到全选的复选框上。 以下是示例代码： ```jsx import React, { useState } from "react"; const ShoppingCart = ({ items }) => { const [selectedAll, setSelectedAll] = useState(false); // 处理全选/反选 const handleSelectAll = () => { setSelectedAll(!selectedAll); }; // 处理子组件的选中状态改变 const handleItemChange = (index, checked) => { // TODO: 更新 items[index] 的选中状态 }; return ( <div> <label> <input type="checkbox" checked={selectedAll} onChange={handleSelectAll} /> 全选 </label> {items.map((item, index) => ( <CartItem key={index} item={item} checked={item.checked} onChange={handleItemChange} /> ))} </div> ); }; const CartItem = ({ item, checked, onChange }) => { const handleItemChange = (event) => { onChange(item.id, event.target.checked); }; return ( <div> <label> <input type="checkbox" checked={checked} onChange={handleItemChange} /> {item.name} </label> </div> ); }; ``` 在 `ShoppingCart` 组件中，我们通过 `map` 方法遍历所有的商品，并渲染 `CartItem` 子组件。在 `CartItem` 组件中，我们通过 `checked` 和 `onChange` 属性来控制选中状态和处理状态改变。 在 `handleSelectAll` 函数中，我们使用 `setSelectedAll` 来更新 `selectedAll` 状态。在 `handleItemChange` 函数中，我们需要更新 `items` 数组中对应商品的选中状态。你可以通过 `useState` 状态管理库来管理 `items` 数组的状态，或者通过 `Redux` 等状态管理工具来管理状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值