typescript - 使用 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 hook 有两个通用变量:整个状态的类型( TState )和您选择的值的类型( TSelected )。我们想在 TState 处做一个绑定(bind)钩子(Hook)。是已知的，但 TSelected取决于我们调用钩子(Hook)的选择器参数。TypedUseSelectorHook基本上只是一个 typescript 覆盖。您的 useTypedSelector 的值(value)只是 useSelector .createSelectorHook有点不同，因为它是一个返回 useSelector 的工厂函数。钩。它将上下文作为可选参数 (docs link)它有第二个通用变量 Action因为 context取决于 Action 类型。您的选择器 Hook 不依赖于操作类型，因此您无需担心。幸运的是 Action变量是可选的，默认为 AnyAction .您只需要为状态设置泛型:

export const useTypedSelector = createSelectorHook<RootState>();

useTypedSelector 的类型是我们所期望的，这是一个只有一个通用描述所选值的钩子(Hook):

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

Playground Link