从外部文件React Typescript定义useSelector类型

：

在React TypeScript中，可以使用useSelector钩子函数来获取Redux store中的状态。useSelector需要定义一个类型，以便在使用时推断返回的状态类型。

以下是一种从外部文件定义useSelector类型的方式：

1. 首先，在一个单独的文件（例如types.d.ts）中创建一个类型声明文件：

import { RootState } from './path/to/redux/rootReducer';

export type RootStateType = typeof RootState;

上述代码中，我们通过导入RootState来获取Redux store的根状态类型，并通过typeof操作符获取其类型。

1. 然后，在使用useSelector的地方，可以使用刚刚定义的类型：

import { useSelector } from 'react-redux';
import { RootStateType } from './path/to/types.d';

const selectedData = useSelector((state: RootStateType) => state.data);

上述代码中，我们将RootStateType作为useSelector的类型参数，并将其作为状态选择器函数的参数类型。这样，TypeScript 就能够正确地推断出返回的selectedData的类型。

这里简单解释一下上述代码中的各个部分：

• useSelector 是react-redux提供的一个钩子函数，用于从 Redux store 中选择状态。
• state: RootStateType 是状态选择器函数的参数类型，指定了 Redux store 的根状态类型。
• state.data 是选择的状态的示例，你可以根据实际情况替换为你想要选择的状态。

总结一下，从外部文件 React TypeScript 定义 useSelector 类型的步骤如下：

1. 创建一个类型声明文件，并定义根状态类型。
2. 在使用 useSelector 的地方，使用刚刚定义的类型作为类型参数，并在状态选择器函数中使用这个类型来推断返回的状态类型。