如何导出createAsyncThunk生成的action？无法导入rollDice求助

我正在尝试使用Redux Toolkit提供的createAsyncThunk函数编写我的第一个异步thunk，但阅读文档和在线教程数小时后，我似乎遗漏了某些内容，导致无法导入rollDice action。我原本以为createSlice函数会为我生成可导入的action，但实际情况并非如此，请问我遗漏了什么？

测试文件GenerateRandomDice.spec.ts代码：

import { beforeEach, describe, expect, it } from 'vitest'
import { ReduxStore } from '../../../react-view/main'
import { configureStoreWith } from '../../../app/store'
import { Dependencies } from '../../../app/dependencies'
import { InMemoryIdProvider } from '../../../infrastructure/idProvider/InMemoryIdProvider'
import { InMemoryRandomDiceProvider } from '../../../infrastructure/randomDiceProvider/InMemoryRandomDiceProvider'

describe('Generate Random Dice', () => {
  let store: ReduxStore
  let dependencies: Dependencies

  beforeEach(() => {
    dependencies = {
      idProvider: new InMemoryIdProvider(),
      randomDiceProvider: new InMemoryRandomDiceProvider(),
    }
    store = configureStoreWith(dependencies)
  })

  it('should generate 10 random dice', () => {
    store.dispatch(rollDice())
    const state = store.getState()

    expect(state).toBe('something') // I don't expect this to pass, it's not the point
  })
})

切片文件diceSlice.ts代码：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { Dependencies } from '../../app/dependencies'

type ExtraDependencies = {
  extra: Dependencies
}

const rollDice = createAsyncThunk<number, any, ExtraDependencies>(
  `dice/rollDice`,
  async (thunkAPI, { extra: { randomDiceProvider } }) => {
    return randomDiceProvider.generateRandomDieValue()
  },
)

export const initialState = {
  dice: [] as number[],
  loading: false,
  error: null,
}

export const diceSlice = createSlice({
  name: 'dice',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(rollDice.fulfilled, (state, action) => {
      state.dice.push(action.payload)
    })
  },
})

export const diceReducer = diceSlice.reducer

• 手动导出rollDice异步thunk：createAsyncThunk生成的action creator是独立于createSlice的，不会被切片自动导出。你需要在diceSlice.ts里把const rollDice改成export const rollDice，或者在文件末尾添加导出语句：

  export { rollDice }
  

• 在测试文件中导入rollDice：添加对应的导入语句，注意替换成正确的文件路径：

  import { rollDice } from '../path/to/diceSlice' // 替换为实际路径
  

• 修正异步thunk的参数顺序：createAsyncThunk的第二个函数参数，第一个是调用thunk时传入的参数，第二个才是thunkAPI对象。你现在写反了，正确写法如下（用_占位表示不需要传入的参数）：

  const rollDice = createAsyncThunk<number, any, ExtraDependencies>(
    `dice/rollDice`,
    async (_, { extra: { randomDiceProvider } }) => {
      return randomDiceProvider.generateRandomDieValue()
    },
  )
  

内容的提问来源于stack exchange，提问作者A Mehmeto