reactjs - 为什么在 React 中使用 Typescript 时需要 export const useAppDispatch = () => useDispatch()

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，因为那些不是普通的 action 对象。
因此，为了一致性，我们建议用户始终创建钩子(Hook)的预类型版本并使用它们，以免他们不小心忘记使用正确的类型:

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();
}