键入支持createAsyncthunk生成的动作创建者和参数

Question

我一直在跟随 redux Essentials bistirals tutorials tutorials 使用 createAsyncthunk 用于生成thunks。在他们的示例像这样的thunk：

export const addNewPost = createAsyncThunk(
  'posts/addNewPost',
  async (initialPost) => { // Note: initialPost is an object with 3 props: title, content, user
    const response = await client.post('/fakeApi/posts', initialPost)
    return response.data
  }
)

他们在这样的另一个文件中称其为：

await dispatch(addNewPost({ title, content, user: userId }))

在我的项目中，我已经安装了打字稿和react类型（@type/react ）。即使代码是JavaScript，也可以在适当的键入时从VSCODE IDE中获得Intellisense。但是，当我上面做时，我会看到：

​悬停在方法 addNewPost 上，我发现它不需要ARG并返回异步操作。

我如何才能让我的IDE和打字稿键入支持识别所需的正确参数？

我尝试

尝试将一些JSDOC字符串添加到创建 addNewPost 函数之类的功能：

/**
 * addNewPost
 * @returns {(initialPost:{title:string, content:string, user: string}) => void} the returned action create takes an object as arg
 */
export const addNewPost = createAsyncThunk(
  'posts/addNewPost',
  async (initialPost) => {
    const response = await client.post('/fakeApi/posts', initialPost)
...

跟随另一个 stack溢出建议< /a>关于如何使用JSDOC描述返回的功能。但这似乎不起作用。

有人有建议吗？

Answer 1

我很幸运地修改JSDOC在 pareloadCreator param createAsyncthunk 函数之类的函数之类的函数：

export const addNewPost = createAsyncThunk(
  'posts/addNewPost',
  /**
   * Make POST request to API w. params and create a new record
   * @param {{content: string, title: string, user: string}} initialPost
   * @returns {Promise<{content: string, date: string, id: string, reactions: Object, title: string, user: string}>} returned data
   */
  async (initialPost) => {
    const response = await client.post('/fakeApi/posts', initialPost)
    // The response includes the complete post object, including unique ID
    return response.data
  }
)

因为我更仔细地介绍了 code> createSyncthunk param >作品我意识到为什么这更有意义，因为createSyncthunk本身没有返回这些值，它们是我们传递给它的函数的参数和返回类型。

Answer 2

问题是默认 dispatch 从redux类型仅了解 dispatch（）函数可以接受普通操作对象。它确实不是知道thunk函数是可以传递的有效的东西。

为了使此代码正确起作用，您需要按照我们的说明进行说明来设置商店并推断基于所有已配置的实际中间件， <代码> <代码>的类型通常包括thunk中间件：

https://redux.js.org/tutorials/typescript-quick-start

然后，使用该 appdispatch 该应用程序，因此当您尝试派遣某些东西时，TS识别出thunks是一件有效的事情。

因此，通常：

// store.ts
const store = configureStore({
  reducer: {
    posts: postsReducer,
    comments: commentsReducer,
    users: usersReducer
  }
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

// 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>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

// MyComponent.ts
import { useAppDispatch } from '../../app/hooks'

export function MyComponent() {
  const dispatch = useAppDispatch()

  const handleClick = () => {
    // Works now, because TS knows that `dispatch` is `AppDispatch`,
    // and that the type includes thunk handling
    dispatch(someThunk())
  }
}

在特定情况下，您正在使用 createAsyncthunk 。您需要告诉ts ts的参数是什么类型，per https：> https：> https：> https： //redux-toolkit.js.org/usage/usage-with-typescript#createasyncthunk ：

export const addNewPost = createAsyncThunk(
  'posts/addNewPost',
  async (initialPost: InitialPost) => { 
    // The actual `client` in the Essentials tutorial is plain JS
    // But, if we were using Axios, we could do:
    const response = await client.post<ResultPost>('/fakeApi/posts', initialPost)
    // If the `client` was written well, `.data` is of type `ResultPost`
    return response.data
  }
)