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

2023-03-11 本文已影响0人大春春

我的博客地址

文章目录

前言

该篇博客介绍如何使用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，并使用它包裹<App />组件
image.png
验证成果
验证成果之前我们需要先将store和components的路径别名分别添加进webpack和tsconfig中去，不动怎么添加的看我上一篇文章:

image.png
image.png