如何在 Typescript 中使用 redux-thunk 通过 ThunkAction 正确输入 thunk？

我正在尝试输入检查我的redux-thunk使用 Typescript 编写代码。

来自 Redux 官方文档：与 Redux Thunk 一起使用 https://redux.js.org/recipes/usage-with-typescript#usage-with-redux-thunk，我们得到这个例子：

// src/thunks.ts

import { Action } from 'redux'
import { sendMessage } from './store/chat/actions'
import { RootState } from './store'
import { ThunkAction } from 'redux-thunk'

export const thunkSendMessage = (
  message: string
): ThunkAction<void, RootState, unknown, Action<string>> => async dispatch => {
  const asyncResp = await exampleAPI()
  dispatch(
    sendMessage({
      message,
      user: asyncResp,
      timestamp: new Date().getTime()
    })
  )
}

function exampleAPI() {
  return Promise.resolve('Async Chat Bot')
}

为了减少重复，您可能需要在存储文件中定义一次可重用的 AppThunk 类型，然后在编写 thunk 时使用该类型：

export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>

QUESTION

我不完全理解的用途ThunkAction type:

ThunkAction<void, RootState, unknown, Action<string>>

有 4 个类型参数，对吗？

1st - void

这是 thunk 的返回类型，对吗？难道不应该吗Promise<void>，因为它是async?

2nd - RootState

这是完整的状态形状，对吧？我的意思是，这不是切片，而是完整的状态。

3rd - unknown

为什么是这样unknown？这是什么？

4th - Action<string>

对此也不太明白。为什么是Action<T>将字符串作为参数？是否应该永远如此string？为什么？

从打字https://github.com/reduxjs/redux-thunk/blob/d28ab03fd1d2dd1de402928a9589857e97142e09/src/index.d.ts https://github.com/reduxjs/redux-thunk/blob/d28ab03fd1d2dd1de402928a9589857e97142e09/src/index.d.ts

/**
 * A "thunk" action (a callback function that can be dispatched to the Redux
 * store.)
 *
 * Also known as the "thunk inner function", when used with the typical pattern
 * of an action creator function that returns a thunk action.
 *
 * @template TReturnType The return type of the thunk's inner function
 * @template TState The redux state
 * @template TExtraThunkARg Optional extra argument passed to the inner function
 * (if specified when setting up the Thunk middleware)
 * @template TBasicAction The (non-thunk) actions that can be dispatched.
 */
export type ThunkAction<
  TReturnType,
  TState,
  TExtraThunkArg,
  TBasicAction extends Action
> = (
  dispatch: ThunkDispatch<TState, TExtraThunkArg, TBasicAction>,
  getState: () => TState,
  extraArgument: TExtraThunkArg,
) => TReturnType;

First - T返回类型

这里我们不关心返回类型——无论如何我们也不等待 thunk 的结果。在 TS 中，可以将任何函数分配给 void 签名，因为它不会损害类型安全。Here's https://www.typescriptlang.org/play?#code/C4TwDgpgBAYg9nKBeKAKAlMgfFAbnASwBMBuAKDIGM4A7AZ2CgDMEBBOkGygLlgWSgBDDlzSYkOAN5koUavTgAbCADpFcAOaoA5Czjb05AL4V5DZmxGUAcgFcAthABOBHn0QphnSmOxRpsmZKqupauggG5LJOEMC2TjRQAIwATADMxqa05nq88B6%20Ev4yctnBapo6epFkJhRAA显示我可以将各种异步/非异步函数分配给 void 函数签名的示例：

我们使用提供的调度函数来触发我们关心的下一个操作 - 因此就时间而言唯一重要的是我们在异步函数内部等待某些事情。 Redux-thunk 内部不会对该函数的结果执行任何操作。这是关于 thunk 在幕后如何工作的一个很好的解释（只需预览）：

https://frontendmasters.com/courses/rethinking-async-js/synchronous-and-asynchronous-thunks/ https://frontendmasters.com/courses/rethinking-async-js/synchronous-and-asynchronous-thunks/

Second - TState是的 - 这是整个商店状态类型

第三个 - TExtraThunkARg您可以添加自己的自定义额外参数，该参数在调度和 getState 之后传递到 thunk 中。这默认为未知，因为除非您明确提供它，否则不清楚它是什么。这是类型安全的，因为尝试与未知参数交互将导致编译时错误。

更多这里：https://github.com/reduxjs/redux-thunk#injecting-a-custom-argument https://github.com/reduxjs/redux-thunk#injecting-a-custom-argument

第四——TBasicAction

这是一种动作类型。动作是最基本的动作类型 - 每个动作都type属性是一个纯字符串。您可以选择提供自己的更具体的类型 - 即type MyActionType = 'FOO_ACTION' | 'BAR_ACTION'为了进一步类型安全/缩小范围。然后您可以将其用作操作。