使用类型化的useSelector挂钩的优势

使用typescript的一个好处是，它减少了代码出错的风险，在你的代码库里有更多的信息/文档。为了在我们的react应用中使用redux时完全接受这些很酷的功能，我们必须使用类型化的react-redux挂钩。在这篇文章中，我们将探讨如何在useSelector 钩子上执行类型化。

当使用类型化的useSelector钩子时，我们的编辑器能够检测与我们的redux中心状态相关的属性。

为了实现这一点，我们已经创建了一个自定义的钩子，名字叫useTypedSelector 。但是在我们开始实施这个很酷的钩子之前，我们必须先做一些调整。

在我们创建这个钩子之前，我们必须首先确定我们的redux状态的类型，即中心状态的属性。为了实现这一点，我们必须执行以下步骤：

// import all reducers
import {combineReducers, createStore, applyMiddleware} from "redux";
// combine reducers
const reducer = combineReducers({});
export const store =createStore(reducer);
export type RootState = ReturnType<typeof reducer>;

为了注释类型化的useSelector钩子，我们需要RootState，它代表我们redux中心状态的类型。

TypedUseSelectorHook 因此，为了实现我们自定义的类型化useSelector钩子，我们需要react-redux 的接口和我们的RootState 进行注释：

import {useSelector, TypedUseSelectorHook}  from "react-redux";
import {RootState} from "../state";

export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

在这之后，我们就可以继续使用这个钩子来选择我们需要使用的状态的片断。