基于react+typescript+redux的美团外卖点餐购物车的项目（一）

---

一、项目展示

二、项目准备

本次基于react+typescript+redux的美团外卖点餐购物车的项目需要用到的技术栈如下

• @reduxjs/toolkit：Redux Toolkit是一个官方推荐的用于简化Redux开发的工具集。它提供了一些实用的函数和工具，帮助开发者更轻松地编写Redux代码，并且减少了样板代码的数量。
• axios：Axios是一个基于Promise的HTTP客户端，用于发送HTTP请求。它可以在浏览器和Node.js环境中使用，提供了简洁的API和丰富的功能，使得发送和处理HTTP请求变得更加简单和灵活。
• classnames：Classnames是一个用于动态生成CSS类名的工具库。它可以根据条件动态地添加或删除CSS类名，使得样式的管理更加方便和灵活。
• json-server：Json-server是一个用于快速搭建模拟RESTful API的工具。它可以根据提供的JSON数据文件自动生成API接口，方便前端开发人员进行接口调试和开发。
• lodash：Lodash是一个实用的JavaScript工具库，提供了许多常用的函数和工具方法，用于简化JavaScript编程。它提供了高效的数据处理、数组操作、函数式编程等功能，帮助开发者提高开发效率。
• react：React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，通过构建可复用的组件来构建复杂的用户界面。React具有高性能、灵活性和可测试性等特点，被广泛应用于前端开发。
• react-redux：React Redux是一个用于在React应用中管理状态的库。它提供了一个用于连接React组件和Redux状态管理的API，使得在React应用中使用Redux变得更加简单和高效。通过React Redux，开发者可以将Redux的状态和行为注入到React组件中，实现状态的共享和更新。

在项目文件夹中快速创建一个react的typescript脚手架

npx create-react-app 项目名称 --template typescript

使用npm下载所需要的的依赖包

npm install axios @reduxjs/toolkit react-redux classnames json-server lodash

二、目录准备

项目准备完成后，在根目录下创建server目录用于存放数据，src目录下创建两个文件夹，分别是components用于存放组件的代码，一个是store用于编写redux状态管理的代码，在components下的Cart（购物车列表）,Count（加减控制按钮）,FoodsCategory（菜单上的食物列表）,Menu（菜单分类列表）,NaBar（导航栏），里面分别包含index.tsx和index.css用于编写组件和样式

store文件夹下的modules文件夹用于存放Redux的模块，index.tsx文件用于创建和导出Redux的store对象以便整个应用都可以访问到Redux的状态。hook.tsx组件用于提供自定义的hooks，以便在React组件中更方便地使用Redux的状态和操作

数据准备

在server文件夹里新增一个data.json文件，在package.json文件中script添加一个命令用于启动后端，添加的命令和数据如下

"serve": "json-server server/data.json --port 3004"//使用json-server启动后端端口3004，数据来源为server/data.json

{
   
  "takeaway": [
    {
   
      "tag": "318569657",
      "name": "一人套餐",
      "foods": [
        {
   
          "id": 8078956697,
          "name": "烤羊肉串(10串)",
          "like_ratio_desc": "好评度100%",
          "month_saled": 40,
          "unit": "10串",
          "food_tag_list": [
            "点评网友推荐"
          ],
          "price"