从零搭建项目(5) --- 前端: 搭建路由和状态管理

我的博客地址

正式地址
测试地址
前端源码
后端源码

文章目录

1. 项目及其技术栈介绍
2. 前端: 项目初始化
3. 前端: 使用Sass和Antd
4. 前端: 开发体验优化
5. 前端: 搭建路由和状态管理
6. 前端: 支持Axios
7. 前端: 打包与环境变量设置
8. 前端: 团队代码规范
9. 后端: 项目初始化和使用Koa相关
10. 后端: 使用TypeORM和MySQL
11. 部署: 使用nginx部署前端项目
12. 部署: 后端部署
13. 部署: 使用jenkins自动化部署

前言

该篇博客介绍如何使用react-router4+搭建前端路由，并使用最新的suspense和lazy构建路由的按需加载。同时介绍状态管理的搭建，其中在状态管理搭建中，会尝试使用最新的useReducer+context来搭建前端的状态管理，以及他与TypeScript之间的配合。

1. React Router4+，suspense，lazy
2. useReducer + context

前端路由搭建

• 安装react-router
  首先我们需要安装react-router以及他的类型文件
  npm i -S react-router-dom
npm i -D @types/react-router-dom
  在这里说一下react-router和react-router-dom之间的区别:
  react-router是react-router-dom的核心代码，提供理由的核心api，例如Router、Route、Switch等，而react-router-dom提供了BrowserRouter，Link等api，react-router-dom里面包含了react-router，所以一般只需要安装react-router-dom

• 编写路由页面
  然后我们在src/containers/views中编写两个路由页面PageA和PageB
  

  

  image.png

• 接着我们还是在src/containers/views中新建App组件，并在App组件下新建routerMap.tsx文件用作存放路由表。
  在routerMap文件中，我们引入lazy方法，并通过import()引入PageA和PageB，然后通过统统放到一个数组中，将这个数组导出去:
  

  

  image.png

• 我们去到App/index.tsx中，从react-router-dom中导入BrowserRouter, Route和Switch，以及从React中导入Suspense组件，然后编写路由文件，并将其用Suspense包裹起来，使用了lazy方法导入的组件必须用Suspense包裹，否则不能加载出来并报错:
  

  

  image.png

• 在这里需要注意的是，如果使用的是BrowserRouter，需要在webpack中加上devServer配置，并打开historyApiFallback，原因是当跳转到page-b页面的时候，他会试图寻找page-b.html，但我们是单页应用，所以没有这个文件，从而出现找不到的情况，而historyApiFallback会在找不到页面的情况下跳转回index.html，避免直接出现找不到的情况:
  

  

  image.png

• 最后我们回到页面查看跳转情况:
  路径为/的时候加载PageA:
  

  

  image.png
  
  当路径切换为/page-b的时候，则加载PageB:
  
  

  image.png
  
  这时候我们的前端路由就搭建好了，并且可以进行动态加载

• 使用withRouter方法进行路由跳转
  去到PageA页面添加如下代码:
  

  

  image.png
  
  
  

  image.png
  
  这时候点击跳转B按钮的时候就能够跳转到/page-b路径了:
  
  

  image.png

状态管理搭建

在React技术栈中我们通常使用Mobx，Redux进行前端状态管理，但在本项目中未采用这两个库，而是使用了useReducer + context的方式来进行搭建，而本文中则使用一个加减计数器的方式来展示如何搭建和使用useReducer + context状态管理

进行这一步之前首先需要知道如何使用useContext、createContext以及useReducer

• 首先我们在src文件夹下新建两个文件夹store和components，其中store用于存储共用状态和配置，components用于存放组件。
  

  

  image.png

• 然后我们在store文件夹中新建index.tsx文件和count文件夹，在count文件夹中新建index.tsx、reducer.ts以及types.d.ts文件:
  

  

  image.png

• 其中index.tsx文件用于存放Provider和初始状态，如下图:
  

  

  image.png

• 然后在reducer.ts中，我们开始编写reducer:
  

  

  image.png
  
  编写完成在index.tsx中导入:
  
  

  image.png

• 解决类型报错问题
  这时候你会发现reducer和index.tsx中都存在很多报错，这是因为没有添加类型导致ts认为他们是any类型，所以我们为他们添加类型文件。
  我们去到之前新建的types.d.ts文件中，定义好state的接口和action的类型，为了避免今后store变得原来越大，我们使用命名空间来避免命名冲突:
  

  

  image.png
  
  之后到reducer.ts将类型补充上去:
  
  

  image.png
  
  而index.tsx中props的报错则可以使用React自带的ComponentType类型将Provider定义为组件类型以解决:
  
  

  image.png
  
  
  

  image.png

• 定义Context的类型
  另外有些小伙伴可能会有如下ts错误:
  

  

  image.png
  
  这是因为我们在createContext中传入的参数为null导致的。
  要解决这个问题首先我们去到src/types文件夹中新增context.d.ts文件，接着定义Context的类型，注意因为之前在Context的value中我们放入的是state和dispatch，所以这两个都需要进行定义，而state和dispatch每个store可能都不一样，所以需要用到泛型:
  
  

  image.png
  
  之后到index.tsx中进行使用，注意这里我们从react中导入了Dispatch类型:
  
  

  image.png
  
  最后我们到tsconfig.json中将strictNullChecks的属性设置为false:
  
  

  image.png

• 最后我们回到store/index.tsx文件中，导入所有的Provider和useXXXStore，然后组成一个数组，通过一个总的Provider进行导出:
  

  

  image.png
  
  然后到src/index.tsx中导入这个总的Provider，并使用它包裹组件
  
  

  image.png

• 验证成果
  验证成果之前我们需要先将store和components的路径别名分别添加进webpack和tsconfig中去，不动怎么添加的看我上一篇文章:
  

  

  image.png
  
  
  

  image.png

我们到之前新建的components文件夹中新建两个组件CountOperation和ShowCount:

image.png

image.png

然后在里面将 useTestStore方法从store引入，这个方法执行后可以得到 state和 dispatch

image.png

image.png

并且这些都是带有类型提示的，说明我们的ts和 useReducer + context结合得非常棒了:

image.png

最后把这两个组件在PageA页面中引入进行成果验证:

image.png

查看结果:

image.png

这样我们的useReducer + context的状态管理方案就完成了。
难点我估计在于对Context的类型编写，因为这一块会用到嵌套的泛型，而泛型在TypeScript中是一个难点，但这个难点是必须攻克的:

image.png