为什么在 React 中使用 Typescript 时需要导出 const useAppDispatch = () => useDispatch<AppDispatch>()

Question

我已经使用 JS 进行了一些 React 工作，但现在我正在创建一个新项目来学习使用 Typescript 进行 React。当我使用JS并需要使用时dispatch，我只是从react-redux导入了useDispatch：

import { useDispatch, useSelector } from 'react-redux';
const AuthAppBar = () => {
  const dispatch = useDispatch();
  const isUserLogged = useSelector(authSelector.isUserLogged);
  const { event } = useGoogleAnalytics();

  const userLogout = () => {
    const userManager = authManager.getUserManager();
    dispatch(authActions.setLoggingOut(true));
    userManager.signoutRedirect({ state: { callbackUrl: routes.home.path } });

    event('Account', 'Logout');
  };

  return <></>;
};

但现在在这个 Typescript 项目中，文档说我需要这样做：

// hooks.ts
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './store';

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>();


// useGetDeviceById.ts
import { useEffect } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import { useAppDispatch, useAppSelector } from 'src/hooks';

const useGetDeviceById = () => {
  const dispatch = useAppDispatch();
  // ...
}

为什么我需要这样做？

Answer 1

您不需要这样做，但这是一个很好的便利因素，并且可以防止以后出现一些错误。

通常，您必须在每个组件文件中执行此操作：

// import the RootState type
import { RootState, AppDispatch } from "app/store";
import { useSelector, useDispatch } from "react-redux";

function MyComponent() {
  // Specifically mark the `state` arg as being of type RootState
  const todos = useSelector( (state: RootState) => state.todos);

  // Specifically mark `dispatch` as being a type that understands thunks
  const dispatch : AppDispatch = useDispatch();
}

虽然成本不高，但重复这样做可能会很烦人。此外，我们看到的最常见问题之一是人们不使用特定于商店的类型版本Dispatch，并且让 TS 告诉他们不能调度 thunk，因为这些不是普通的操作对象。

因此，为了保持一致性，我们建议用户始终创建钩子的预键入版本并使用它们，这样他们就不会意外忘记使用正确的类型：

import { useAppSelector, useAppDispatch } from "app/hooks";

function MyComponent() {
  // Already knows the state is `RootState`
  const todos = useAppSelector(state => state.todos);

  // Already knows that `dispatch` can accept a thunk
  const dispatch = useAppDispatch();
}