无法使用 Redux 工具包无故更新我的 state

Question

我是 Redux 工具包的新手，我想我错过了一些东西，即使看起来我做的一切都是对的。

这是我的测试用例：

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'
import { rollDice } from '../diceSlice'
import { Die } from '../entities/Die'
import { IdProvider } from '../ports/IdProvider'
import { RandomDiceProvider } from '../ports/randomDiceProvider'

function dieDataBuilder() {
  return new Die('uuid', {
    isHeld: false,
    value: 0,
  })
}

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

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

  it('should generate 10 random dice', () => {
    const expectedDice = Array(10).fill(dieDataBuilder())

    store.dispatch(rollDice())
    const generatedDice = store.getState().dice.dice

    expect(generatedDice).toStrictEqual(expectedDice)
  })
})

因此，以下 SUT（被测系统）：

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

type ExtraDependencies = {
  extra: Dependencies
}

export const rollDice = createAsyncThunk<Die[], void, ExtraDependencies>(
  `dice/rollDice`,
  async (thunkAPI, { extra: { randomDiceProvider, idProvider } }) => {
    const dice = new GenerateRandomDiceUseCase(
      randomDiceProvider,
      idProvider,
    ).execute()
    return Promise.resolve(dice)
  },
)

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

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

console.log(action.payload)打印出我所期望的，即 10 个骰子的数组。

    console.log
      [
        Die { id: 'uuid', props: { value: 0, isHeld: false } },
        Die { id: 'uuid', props: { value: 0, isHeld: false } },
        Die { id: 'uuid', props: { value: 0, isHeld: false } },
        Die { id: 'uuid', props: { value: 0, isHeld: false } },
        Die { id: 'uuid', props: { value: 0, isHeld: false } },
        Die { id: 'uuid', props: { value: 0, isHeld: false } },
        Die { id: 'uuid', props: { value: 0, isHeld: false } },
        Die { id: 'uuid', props: { value: 0, isHeld: false } },
        Die { id: 'uuid', props: { value: 0, isHeld: false } },
        Die { id: 'uuid', props: { value: 0, isHeld: false } }
      ]

我尝试推送、连接、返回 state，而不是返回它（因为 Immer 应该允许突变并弄清楚）。

但无论如何，我的单元测试结果一直是：

  Generate Random Dice
    ✕ should generate 10 random dice (109 ms)

  ● Generate Random Dice › should generate 10 random dice

    expect(received).toStrictEqual(expected) // deep equality

    - Expected  - 72
    + Received  +  1

    - Array [
    -   Die {
    -     "id": "uuid",
    -     "props": Object {
    -       "isHeld": false,
    -       "value": 0,
    -     },
    -   },

[...],

    -   Die {
    -     "id": "uuid",
    -     "props": Object {
    -       "isHeld": false,
    -       "value": 0,
    -     },
    -   },
    - ]
    + Array []

      38 |     const generatedDice = store.getState().dice.dice
      39 |
    > 40 |     expect(generatedDice).toStrictEqual(expectedDice)
         |                           ^
      41 |   })
      42 | })
      43 |

      at Object.<anonymous> (src/core/dice/usecases/GenerateRandomDice.spec.ts:40:27)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        3.435 s, estimated 4 s
Ran all test suites matching /src\/core\/dice\/usecases\/GenerateRandomDice.spec.ts/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

完整回购： https://github.com/amehmeto/HexaTenzies

Answer 1

我终于解决了。

1st/你是对的，我需要等待。 2nd/我删除了 return 3rd/我使用 push 并遍历数组而不是尝试使用 concat

extraReducers: (builder) => {
    builder.addCase(rollDice.fulfilled, (state, action) => {
      action.payload.forEach((die) => state.dice.push(die))
    })
  }