来自 createAsyncThunk

Question

在我的测试中使用 store.dispatch() 调用 AsyncThunkAction 时出现输入错误。我正在使用 redux-toolkit。测试将运行并工作，但 TS 不高兴。

cognitoConfigSlice.ts

type DispatchExts = ThunkDispatch<RootState, void, AppDispatch> // error here
const middlewares = [thunk]
const mockStore = configureMockStore<LoadConfigState, DispatchExts>(middlewares)

it("creates cognitoConfig/fetch/fulfilled on successful fetch", async () => {
  // ...
  await store.dispatch(fetchConfig())
  const actions = store.getActions()
  console.log(actions)
})

问题

我在测试文件的 type DispatchExts = ThunkDispatch<RootState, void, AppDispatch> 行收到以下类型错误，该错误特别出现在 AppDispatch

Type 'ThunkDispatch<{ cognitoConfig: LoadConfigState; }, null, AnyAction> & ThunkDispatch<{ cognitoConfig: LoadConfigState; }, undefined, AnyAction> & Dispatch<...>' does not satisfy the constraint 'Action<any>'.
  Property 'type' is missing in type 'ThunkDispatch<{ cognitoConfig: LoadConfigState; }, null, AnyAction> & ThunkDispatch<{ cognitoConfig: LoadConfigState; }, undefined, AnyAction> & Dispatch<...>' but required in type 'Action<any>'.ts(2344)

来源

cognitoConfigSlice.ts

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"

// ...

export const fetchConfig = createAsyncThunk<
  ConfigPayload,
  undefined, // thunk arg is discarded, so not important
  { rejectValue: string }
>("cognitoConfig/fetch", async (_, { rejectWithValue }) => {
  try {
    const response = await get("/api/config", false)
    return response.parsedBody as ConfigPayload
  } catch (e) {
    return rejectWithValue(`Got error fetching config: ${e}`)
  }
})

const cognitoConfigSlice = createSlice({
  name: "cognitoConfig",
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder.addCase(fetchConfig.pending, state => {
      state.status = Status.loading
    })
    builder.addCase(fetchConfig.fulfilled, (state, action) => {
      state.status = Status.succeeded
      state.configPayload = action.payload
    })
    builder.addCase(fetchConfig.rejected, (state, action) => {
      state.status = Status.failed
      state.errorMessage = action.payload
    })
  },
})

export type CognitoConfigActions = typeof cognitoConfigSlice.actions

root.ts

import { configureStore } from "@reduxjs/toolkit"
import { useDispatch } from "react-redux"
import cognitoConfigSlice from "./cognitoConfigSlice"
// ...

const store = configureStore({
  reducer: {
    cognitoConfig: cognitoConfigSlice.reducer,
  },
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const useAppDispatch = () => useDispatch<AppDispatch>()

export default store

其他尝试

我也尝试不指定 configureMockStore 的类型，如下所示：

const middlewares = [thunk]
const mockStore = configureMockStore(middlewares)

但是它在`await store.dispatch(fetchConfig()) 的fetchConfig() 部分给了我以下错误：

Argument of type 'AsyncThunkAction<ConfigPayload, undefined, { rejectValue: string; }>' is not assignable to parameter of type 'AnyAction'.
  Property 'type' is missing in type 'AsyncThunkAction<ConfigPayload, undefined, { rejectValue: string; }>' but required in type 'AnyAction'.ts(2345)