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

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

为什么需要封装？

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

无法识别类型：

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

没有友好的提示

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

先进行简单的封装

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

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

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

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

type IRootState = ReturnType

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

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

深度封装

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

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

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

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

我们可以看一下他的源码

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

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

selector: (state: TState) => TSelected

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

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

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

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

我的store：

我的counter：

ore 和一些数据

我的store：

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

我的counter：