使用 createSelectorHook 而不是已弃用的 TypedUseSelectorHook

Question

我有以下代码在 TypeScript 中使用 Redux 定义类型化选择器：

import { useSelector, TypedUseSelectorHook } from 'react-redux';

export interface RootState {
    user: {
        account: string;
    }
};

export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

现在我看到它TypedUseSelectorHook已被弃用，应替换为createSelectorHook<State, Action>().

不知道如何更改它，是否也Action必须在那里。有什么建议吗？

Answer 1

该useSelector钩子有两个通用变量：整个状态TState的类型( ) 和您选择的值的类型 ( TSelected)。我们想在TState已知的地方创建一个绑定钩子，但TSelected根据我们调用钩子的选择器参数而有所不同。

TypedUseSelectorHook基本上只是一个打字稿覆盖。你的价值useTypedSelector只是useSelector。

createSelectorHook有点不同，因为它是一个返回useSelector钩子的工厂函数。它将上下文作为可选参数（文档链接），并且它有第二个通用变量，Action因为这context取决于操作类型。您的选择器挂钩不依赖于操作类型，因此您无需担心。幸运的是，该Action变量是可选的，默认为AnyAction. 您只需要为状态设置泛型：

export const useTypedSelector = createSelectorHook<RootState>();

for 的类型useTypedSelector是我们所期望的，它是一个只有一个描述所选值的泛型的钩子：

const useTypedSelector: <Selected extends unknown>(
  selector: (state: RootState) => Selected, 
  equalityFn?: ((previous: Selected, next: Selected) => boolean) | undefined
) => Selected

游乐场链接