对react+ts项目中的useSelector进行类型封装

我叫汪枫

已于 2024-03-28 06:38:46 修改

阅读量920

点赞数

分类专栏： react 文章标签： react.js javascript 前端

于 2023-01-24 23:27:13 首次发布

本文链接：https://blog.csdn.net/weixin_47121832/article/details/128758869

版权

react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

对react+ts项目中的useSelector进行类型封装

为什么需要封装？

今天在写react+ts的项目时发现我们在进行redux数据共享时出现了无法识别类型等情况

无法识别类型：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DiQtGuwI-1674573720204)(C:\Users\WangFeng\AppData\Roaming\Typora\typora-user-images\image-20230124223753529.png)]$

具体的原因就是因为我们这里的state是unknow类型我们不能进行任何的操作

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kH7PpxOZ-1674573720205)(C:\Users\WangFeng\AppData\Roaming\Typora\typora-user-images\image-20230124223823208.png)]$

没有友好的提示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d7tGoMdf-1674573720206)(C:\Users\WangFeng\AppData\Roaming\Typora\typora-user-images\image-20230124223936234.png)]$

出现这些情况的原因就是我们的state类型无法正常的获取我们可以对其进行封装一些

先进行简单的封装

思路我们可以通过store中的getstate获取到对应的类型

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tIHNhIRM-1674573720206)(C:\Users\WangFeng\AppData\Roaming\Typora\typora-user-images\image-20230124224713992.png)]$

第一步我们先引入一下你的store

从你的store上拿到你的getState 对他进行一次类型检测你可以发现他的返回值就是你需要的类型

我们这里又因为使用的ts我们想获取他的返回值类型还是很简单的

type IRootState = ReturnType<GetstateFunType>

那么我们现在就拿到了对应的数据类型把他给到我们的state上面我们的state就能正常的使用了

这个就是基本的思路接下来我们进行更深的封装

深度封装

我们可以对useSelector进行一个小小的封装

type GetstateFunType = typeof store.getState //我们可以发现他的返回值类型就是我们需要的类型
type IRootState = ReturnType<GetstateFunType> //这样我们就获取到了他的返回值类型
export const useAppSelector: TypedUseSelectorHook<IRootState> = useSelector

你自己声明一个useAppSelector让他等于react-redux的useSelector在这些基础之上我们进行一个类型的封装

这里我们需要借助react-redux中的一个工具TypedUseSelectorHook

我们可以看一下他的源码

export interface TypedUseSelectorHook<TState> {
    <TSelected>(selector: (state: TState) => TSelected, equalityFn?: EqualityFn<NoInfer<TSelected>>): TSelected;
}

我们发现他的第一个参数是一个函数调用签名

selector: (state: TState) => TSelected

我们发现TypedUseSelectorHook他的泛型类型是TState

那么我们只需要把我们获取到的类型通过泛型传递给TState

这样的话他的第一个参数的state就能获取到我们传递过去的类型了

附加 ----我的store 和一些数据

我的store：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x3s4f4jl-1674573720206)(C:\Users\WangFeng\AppData\Roaming\Typora\typora-user-images\image-20230124224823512.png)]$

我的counter：

ore 和一些数据

我的store：

[外链图片转存中…(img-x3s4f4jl-1674573720206)]

我的counter：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-beFRmZGl-1674573720206)(C:\Users\WangFeng\AppData\Roaming\Typora\typora-user-images\image-20230124224852503.png)]$