TypeScript中GET请求场景下如何跳过Redux Thunk的payload creator首个参数？

要实现无需传递参数的GET请求，你需要从两个方面修改原代码：

1. 调整泛型类型定义 #

将createAsyncThunk的第二个泛型参数（即payload creator首个参数的类型）从number改为void，明确表示不需要接收任何输入参数。

2. 修改payload creator的参数列表 #

把不需要的userId参数替换为下划线_（这是JavaScript/TypeScript中表示“不使用该参数”的惯例），后续只使用thunkApi即可。

修改后的完整代码 #

const fetchUsers = createAsyncThunk<
  // 返回值类型
  MyData,
  // 首个参数类型：void表示无需传入参数
  void,
  {
    // 自定义thunkApi的类型
    dispatch: AppDispatch
    state: State
    extra: {
      jwt: string
    }
  }
>('users/fetchAll', async (_, thunkApi) => {
  const response = await fetch('https://reqres.in/api/users', {
    headers: {
      Authorization: `Bearer ${thunkApi.extra.jwt}`,
    },
  })
  return (await response.json()) as MyData
})

额外说明 #

• 如果你不需要整个thunkApi对象，还可以直接解构出需要的属性，让代码更简洁：

  const fetchUsers = createAsyncThunk<
    MyData,
    void,
    { extra: { jwt: string } }
  >('users/fetchAll', async (_, { extra }) => {
    const response = await fetch('https://reqres.in/api/users', {
      headers: {
        Authorization: `Bearer ${extra.jwt}`,
      },
    })
    return (await response.json()) as MyData
  })
  

• 调用这个thunk的时候，直接执行dispatch(fetchUsers())即可，不需要传入任何参数。

内容的提问来源于stack exchange，提问作者Mohammad Rafi