• 本阶段将带你学习前端圈子中口碑极佳的 React 框架以及它的一些高阶用法、组件库封装、数据流方案、服务端渲染（SSR）、静态站点生成（SSG），同时深入 React 框架内部，剖析 React 部分核心源码和实现，最后还会结合 TypeScript 和蚂蚁金服的 Ant Design 库做出实战。

模块五 React + Redux + Ant Design + TypeScript 实战

• 本模块中我们通过使用 TypeScript 编程语言，基于 React 全家桶（React、React Router、Redux、React Redux、Ant Design）开发在线教育课堂项目。通过实战深入掌握 React 及其相关技术栈的使用。

任务一：基础配置

• 1.项目介绍

1. 技术栈

1.1 客户端

• 2.技术栈介绍

• 脚本：TypeScript

• 前端框架：React

• 路由管理：React-router-dom

• 用户界面：Antd

• 全局状态管理：Redux

• 异步状态更新：redux-saga

• 路由状态同步：connected-react-router 把路由的状态同步到store中，可以从stroe获取状态

• 网络请求：Axios

• 调试工具：redux-devtools-extension 能记录store中状态的改变

1.2 服务端

• 脚本：Node.js
• 数据库：Mongodb
• 数据库可视化：Robo 3T

2. 搭建开发环境 (服务端)

2.1 安装 mongodb 数据库 (Mac)

1. 安装 homebrew

   Homebrew 是mac系统中的软件包管理器

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
   

2. 添加 mongodb 仓库源

   brew tap img/5/mongodb/brew
   

3. 安装 mongodb

   安装前确保系统已经安装 xcode 命令行编译开发工具

   xcode-select --install 
   

   brew install mongodb-community
   

4. 启动 mongodb

   brew services run mongodb-community
   

5. 停止 mongodb

   brew services stop mongodb-community
   

6. 文件位置

   1. 数据库配置文件：/usr/local/etc/mongod.conf
   2. 数据库文件默认存放位置：/usr/local/var/mongodb
   3. 日志存放位置：/usr/local/var/log/img/5/mongodb/mongo.log

2.2 安装 mongodb 数据库 (Windows)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I6Aldikf-1630478923580)(./img/5/mongodb/1.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9wmqHbs0-1630478923582)(./img/5/mongodb/2.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IPj6hKd9-1630478923584)(./img/5/mongodb/3.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mJ2GUsR1-1630478923585)(./img/5/mongodb/4.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XGjXYZDV-1630478923587)(./img/5/mongodb/5.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tQvPv5wa-1630478923588)(./img/5/mongodb/6.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Aw9PdV4-1630478923589)(./img/5/mongodb/7.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T3elmJ1X-1630478923590)(./img/5/mongodb/8.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-obL5ORZU-1630478923591)(./img/5/mongodb/9.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zJyCQx8q-1630478923591)(./img/5/mongodb/10.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KgEzuwxU-1630478923592)(./img/5/mongodb/11.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JijoOdpr-1630478923593)(./img/5/mongodb/12.png)]

2.3 数据库可视化 Robo 3T 资料》note》software》robo3t-1.4.2-darwin-x86_64-8650949.dmg

下载地址

2.4 启动服务器端应用程序

1. Mac 用户将服务器端应用程序文件夹拖拽到终端中，windows 用户打开服务器端应用程序文件夹，按住 shift 同时单击鼠标右键，选择在此处打开命令行工具 (cmd 或者 powershell)
2. 执行 npm install 命令安装程序依赖文件
3. 执行 npm start 命令启动服务器端应用程序，服务器端应用程序默认监听 80 端口

• 3.创建Ecommerce项目

3. 搭建开发环境 (客户端)

3.1 创建项目并安装依赖

1. 使用 create-react-app 脚手架创建 react 项目

   npx create-react-app ecommerce-front --template typescript npx 会临时下载脚手架工具，完成后会删除

2. 安装项目依赖

   npm install antd axios moment redux react-redux react-router-dom redux-saga connected-react-router redux-devtools-extension @types/react-redux @types/react-router-dom

3. antd CSS 使用 CDN

   https://cdn.bootcdn.net/ajax/libs/antd/4.8.3/antd.min.css

   • 在pubilc 文件夹下 index.html中通过link标签引入

• 4.根据环境切换服务器端API接口地址

3.2 配置服务器端 API 请求地址

在项目的根目录下新建 .env 文件，并在文件中添加以下内容：

REACT_APP_PRODUCTION_API_URL=http://fullstack.net.cn/api
REACT_APP_DEVLOPMENT_API_URL=http://localhost/api

create-react-app 脚手架中内置了 dotenv，允许我们在 React 项目中配置环境变量，但环境变量的名字必须以 REACT_APP_ 开头。

REACT_APP_PRODUCTION_API_URL： 生产环境的服务器端 API 地址

REACT_APP_DEVLOPMENT_API_URL：开发环境的服务器端 API 地址

在项目中可以通过 process.env.REACT_APP_DEVLOPMENT_API_URL 方式进行访问，但是这样会有弊端，其一是代码过长写起来不方便，其二是如果在代码中将环境写死，当切换环境时改起来也不方便。

解决方案就是将 API 地址写入配置中，根据环境决定使用哪个 API 地址

/src/config.ts

export let API: stringif (process.env.NODE_ENV === "development") {API = process.env.REACT_APP_DEVLOPMENT_API_URL!
} else {API = process.env.REACT_APP_PRODUCTION_API_URL!
}

• npm run buid

• serve -s build

• 6.安装Chrome扩展插件

3.3 安装 chrome 扩展

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P5KTdLyl-1630478923594)(./img/5/images/3.png)]

React Developer Tools：检查React组件层次结构，在页面上显示React组件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kiqsSs8x-1630478923594)(./img/5/images/4.jpg)]

Redux DevTools：监测 Store 中状态的变化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y9M2Bzio-1630478923596)(./img/5/images/5.jpg)]

import { composeWithDevTools } from "redux-devtools-extension"export const store = createStore(rootReducer,composeWithDevTools(applyMiddleware(...middlewares))
)

• 7.页面组件初始化和路由初始化

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4FzuzjyK-1630478923597)(./img/5/1630317336194.jpg)]
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hmv4bqvU-1630478923598)(./img/5/1630317534869.jpg)]
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H3xNbAJ5-1630478923599)(./img/5/1630317984944.jpg)]
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xcrLuQRY-1630478923599)(./img/5/1630317573579.jpg)]
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zsmtYkuf-1630478923600)(./img/5/1630317702589.jpg)]
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iKdnHMUv-1630478923601)(./img/5/1630317800723.jpg)]
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dc6xJOOh-1630478923601)(./img/5/1630317864118.jpg)]
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iMVO9FFM-1630478923602)(./img/5/1630317918900.jpg)]

  • rafce 快捷生成组件

• 8.全局store初始化

• 9.将路由状态同步到全局store

  • npm 官方 connected-react-router

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZJYGrfBF-1630478923603)(./img/5/1630318223008.jpg)]
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2c4WWEbq-1630478923604)(./img/5/1630318325113.jpg)]
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sILyTfFG-1630478923605)(./img/5/1630318368258.jpg)]

任务二：登录注册及首页

1. 创建导航菜单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CpAvRv59-1630478923606)(./img/5/1630371430238.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bb8B5JYv-1630478923607)(./img/5/1630371724812.jpg)]

2. 创建页头

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AJW3xRJv-1630478923607)(./img/5/1630371851923.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gdO68PM7-1630478923608)(./img/5/1630372009087.jpg)]

• node > ecommerce-front > src > style.css 》 放src index.tsx 引入 复制类名jumbotron到 Layout.tsx 的 PageHeager 上

3. 构建注册和登录表单

• 在core中添加 signin signup
• 在Routes.tsx 注册 signin signup
• 在 Navugation.tsx 中添加 signin signup

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QdqkpO1w-1630478923609)(./img/5/1630372901519.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZGkcYiTo-1630478923610)(./img/5/1630373055569.jpg)]

4. 实现注册的Redux流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UzzA5klF-1630478923611)(./img/5/1630373369251.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sriQy5jH-1630478923611)(./img/5/1630373501447.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rv1yUsJV-1630478923612)(./img/5/1630373604074.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y6umevLz-1630478923613)(./img/5/1630374006839.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TR8XHEUV-1630478923613)(./img/5/1630374118309.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AizipPXd-1630478923614)(./img/5/1630374179422.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eqKagGrq-1630478923616)(./img/5/1630374370400.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ka6FgPIA-1630478923617)(./img/5/1630374434849.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tcfa8Y2i-1630478923618)(./img/5/1630374495452.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vbX8KprN-1630478923618)(./img/5/1630374623492.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5VYEEnnT-1630478923620)(./img/5/1630374785068.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qEQDIxn5-1630478923620)(./img/5/1630374840161.jpg)]

5. 处理注册结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5z5j226q-1630478923621)(./img/5/1630375370491.jpg)]

• 要给 from 表单添加属性 form={form} 产生关联

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xuULDXjZ-1630478923622)(./img/5/1630375661918.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0UKQatQ1-1630478923623)(./img/5/1630375712727.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8XysxlNO-1630478923623)(./img/5/1630375766332.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rXw4fYVn-1630478923624)(./img/5/1630375370491.jpg)]

6. 重置注册状态

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GMoXXe4j-1630478923625)(./img/5/1630391277132.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bpl5oZR6-1630478923625)(./img/5/1630391318009.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-03kzFt9f-1630478923627)(./img/5/1630391368269.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-232WolRS-1630478923627)(./img/5/1630391481519.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YkgePRe9-1630478923628)(./img/5/1630391529852.jpg)]

7. 实现登录redux流程

8. 处理登录结果

• helpers/auth.ts

9. 创建受保护的Dashboard组件

10. 管理员Dashbaord组件添加链接和管理员信息

11. 创建添加分类组件

12. 实现添加分类功能

13. 创建添加商品组件

14. 获取分类列表

15. 实现添加商品功能

16. 构建Home组件布局

17. 完成首页获取商品列表的redux流程

18. 首页商品列表数据展示

19. 加载商品封面

任务三：搜索和筛选

1. 实现搜索功能

2. 展示搜索结果

3. 构建商城页面布局

4. 收集用户的筛选条件

5. 实现商品筛选的redux流程

6. 显示筛选结果

7. 加载更多数据

8. 构建商品详情组件布局

9. 完成根据产品ID获取产品详情redux流程

任务四：购物车

1. 将商品添加到购物车中

2. 构建购物车组件布局

3. 更改购物车中的商品数量

4. 删除购物车中的商品

5. 计算商品总价

6. 增加支付按钮或登录按钮

7. 支付

8. 创建支付成功后的提示页面组件

9. 存储共享状态的另一种方案

10. 获取订单数据

11. 更改订单状态