React(10)

项目实践--创建项目

在store的modules中创建相关的子仓库暴露到仓库index文件中

导入creatSlice和axios

创建仓库 和数据的异步修改方法

javascript 复制代码
// 编写store
// 导入createSlice和axios
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
// 创建slice
const foodsStore = createSlice({
  name: "foods",
  initialState: {
    foodsList: [],
  },
  //修改foods的数据 需要配合异步请求函数
  reducers: {
    setFoodsList(state, action) {
      state.foodsList = action.payload;
    },
  },
});

编写异步请求函数

javascript 复制代码
// 导出actions和reducer
const { setFoodsList } = foodsStore.actions;
const reducer = foodsStore.reducer;

// 异步获取
const fetchFoodsList = () => {
  return async (dispatch) => {
    const res = await axios.get("http://localhost:3004/takeaway");
    const data = res.data;
    dispatch(setFoodsList(data));
  };
};

这存在一个后端接口返回值count 不准确的情况 使用双重foreach 将count变成1初始化

javascript 复制代码
// 异步获取
const fetchFoodsList = () => {
  return async (dispatch) => {
    const res = await axios.get("http://localhost:3004/takeaway");
    const data = res.data;

    //将每一个子项里的foods里的每一项的的count都修改为1
    data.forEach((item) => {
      item.foods.forEach((food) => {
        food.count = 1;
      });
    });

    console.log(data);
    dispatch(setFoodsList(data));
  };
};

导出

javascript 复制代码
// 导出fetchFoodsList
export { fetchFoodsList };
export default reducer;

store的index注册使用

javascript 复制代码
// 导入 configureStore 和 foodsReducer
// 使用 configureStore 创建 store
import { configureStore } from '@reduxjs/toolkit';
import foodsReducer from './modules/takeaway';

const store= configureStore({
  reducer: {
    foods: foodsReducer,
  },
});
export default store;

在App.js中调用仓库方法映射数据

javascript 复制代码
// 导入useDispatch和useEffect和fetchFoodsList
import { useDispatch } from "react-redux";
import { useEffect } from "react";
import { fetchFoodsList } from "./store/modules/takeaway";

在App函数中调用

javascript 复制代码
 // 触发异步请求
  // 使用useDispatch获取dispatch
  const dispatch = useDispatch();
  // 使用useEffect触发异步请求
  useEffect(() => {
    dispatch(fetchFoodsList());
  },[dispatch]);

使用仓库数据进行渲染

渲染数据 使用useSelector进行渲染

const {foodsList}=useSelector((state)=>state.foods);

1、仓库中新建一个控制点击事件的activeIndex变量

javascript 复制代码
const foodsStore = createSlice({
  name: "foods",
  initialState: {
    foodsList: [],
    activeIndex:0
  },
  //修改foods的数据 需要配合异步请求函数
  reducers: {
    setFoodsList(state, action) {
      state.foodsList = action.payload;
    },
    setActiveIndex(state,action){
      state.activeIndex=action.payload;
    }
  },
});

导出相关函数方法

javascript 复制代码
import classNames from 'classnames'
import './index.scss'
import { useDispatch, useSelector } from 'react-redux';
import { setActiveIndex } from '../../store/modules/takeaway';

const Menu = () => {
  const { activeIndex,foodsList } = useSelector(state => state.foods);
  const menus = foodsList.map(item => ({ tag: item.tag, name: item.name }))
  const dispatch=useDispatch();

  return (
    <nav className="list-menu">
      {/* 添加active类名会变成激活状态 */}
      {menus.map((item, index) => {
        return (
          <div
          onClick={()=>dispatch(setActiveIndex(index))}
            key={item.tag}
            className={classNames(
              'list-menu-item',
              activeIndex===index && 'active'
            )}
          >
            {item.name}
          </div>
        )
      })}
    </nav>
  )
}

export default Menu

使用activeIndex和index匹配方法进行css样式控制

并且使用这个值控制菜单列的显示(记得导入activeIndex)

javascript 复制代码
  {/* 外卖商品列表 */}
              {foodsList.map((item,index) => {
                return (
                  activeIndex===index &&  <FoodsCategory
                    key={item.tag}
                    // 列表标题
                    name={item.name}
                    // 列表商品
                    foods={item.foods}
                  />
                );
              })}

添加购物车

点击加号 一个list数组进行添加 如果是没有相关类目的 就进行push 如果有 就进行+1处理

首先添加一个cartList[] 设置相关方法

javascript 复制代码
 addCart(state, action) {
      // 判断是添加过过类目数据,如果添加过就进行add  没有就进行push
      const item = state.cartList.find((item) => item.id === action.payload.id);
      if (item) {
        item.count++;
      } else {
        state.cartList.push(action.payload);
      }
    },

导出相关字段与方法

在加法按钮中添加相关方法

javascript 复制代码
 <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>
相关推荐
梦鱼13 分钟前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
best66614 分钟前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东14 分钟前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生15 分钟前
微信小程序一键登录可行性方案
前端·微信小程序
维他AD钙16 分钟前
前端开发 8 个非常实用小技巧:高效解决日常开发痛点
前端
光影少年20 分钟前
webpack和vite优化方案都有哪些
前端·webpack·node.js
给月亮点灯|21 分钟前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js
kk不中嘞24 分钟前
Webpack 核心原理剖析
前端·webpack·node.js
Yvonne爱编码27 分钟前
简述ajax、node.js、webpack、git
前端·git·ajax·webpack·node.js·visual studio
周小码28 分钟前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d