从零搭建项目(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-routerreact-router-dom之间的区别:
    react-routerreact-router-dom的核心代码,提供理由的核心api,例如Router、Route、Switch等,而react-router-dom提供了BrowserRouter,Link等api,react-router-dom里面包含了react-router,所以一般只需要安装react-router-dom

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

    image.png

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

    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技术栈中我们通常使用MobxRedux进行前端状态管理,但在本项目中未采用这两个库,而是使用了useReducer + context的方式来进行搭建,而本文中则使用一个加减计数器的方式来展示如何搭建和使用useReducer + context状态管理

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

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

    image.png

  • 然后我们在store文件夹中新建index.tsx文件和count文件夹,在count文件夹中新建index.tsxreducer.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.tsxprops的报错则可以使用React自带的ComponentType类型将Provider定义为组件类型以解决:
    image.png

    image.png

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

    image.png

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

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

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

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

    image.png

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

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

    image.png

    image.png

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

image.png

image.png

然后在里面将useTestStore方法从store引入,这个方法执行后可以得到statedispatch
image.png

image.png

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

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

image.png

查看结果:
image.png

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

image.png

推荐阅读更多精彩内容