如何导出从 extraReducers 和 createAsyncThunk 生成的操作

Question

我正在尝试使用 Redux 工具包中提供的 function 编写我的第一个异步 thunk： createAsyncThunk 。

但是在阅读文档和在线说明数小时后，我似乎遗漏了一些东西，因为我无法导入动作rollDice 。

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

据我了解， createSlice函数应该以某种方式为我创建动作，但事实并非如此。

我错过了什么？

Answer 1

看来我是在论坛的帮助下发现了这个问题，所以我在这里发帖以供参考。

所以首先我需要export由rollDice生成的createAsyncThunk 。

这触发了第一个错误： createAsyncThunk.d.ts(108, 118): An argument for 'arg' was not provided. 所以我需要将ThunkArg类型从any更改为void 。

其次，我没有很大的重叠，通过挖掘configureStoreWith解决了这个问题。

import {
  combineReducers,
  configureStore,
  ThunkMiddleware,
} from '@reduxjs/toolkit'
import { diceSlice } from '../core/dice/diceSlice'
import { Dependencies } from './dependencies'

const rootReducer = combineReducers({
  dice: diceSlice.reducer,
})

export const configureStoreWith = (dependencies: Partial<Dependencies>) =>
  configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: false,
        thunk: {
          extraArgument: dependencies,
        },
      }),
  })

我不得不删除Partial以使其工作。 我想保持它的部分性，这样就不必为所有测试实例化我的所有依赖项，而是只为测试需要实例化“cherry-instanciate”。

我不确定如何实现这一目标。