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

我的博客地址 正式地址 测试地址 前端源码 后端源码 文章目录 项目及其技术栈介绍 前端: 项目初始化 前端: 使用Sass和Antd 前端: 开发体验优化 前端: 搭建路由和状态管理 前端: 支持Axios 前端: 打包与环境变量设置 前端: 团队代码规范 后端: 项目初始化和使用Koa相关 后端: 使用TypeORM和MySQL 部署: 使用nginx部署前端项目 部署: 后端部署 部署: 使用jenkins自动化部署 前言 该篇博客介绍如何使用react-router4+搭建前端路由，并使用最新的suspense和lazy构建路由的按需加载。同时介绍状态管理的搭建，其中在状态管理搭建中，会尝试使用最新的useReducer+context来搭建前端的状态管理，以及他与TypeScript之间的配合。 React Router4+，suspense，lazy 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

本文章由javascript技术分享原创和收集