Redux Toolkit：派发createBlockSession异步thunk后状态未更新

我正在开发一个Redux Toolkit项目，其中的异步thunk createBlockSession本应向状态中添加新的阻止会话，但状态并未按预期更新。

相关代码 #

block-session.slice.ts #

import { createSlice } from '@reduxjs/toolkit'
import { createBlockSession } from './usecases/create-block-session.usecase.ts'
import { BlockSession } from './block.session.ts'

type BlockSessionState = {
  blockSessions: BlockSession[]
}
export const blockSessionSlice = createSlice({
  name: 'blockSession',
  initialState: { blockSessions: [] } as BlockSessionState,
  reducers: {},
  extraReducers(builder) {
    builder.addCase(createBlockSession.fulfilled, (state, action) => {
      console.log(action.payload)
      state.blockSessions.push(action.payload)
    })
  },
})

create-block-session.usecase.ts #

import { createAppAsyncThunk } from '../../create-app-thunk.ts'
import { BlockSession } from '../block.session.ts'

export const createBlockSession = createAppAsyncThunk(
  'blockSession/createBlockSession',
  async (payload: BlockSession, { extra: { blockSessionRepository } }) => {
    return blockSessionRepository.createSession(payload)
  },
)

create-block-session.usecase.spec.ts #

describe('Feature: Creating a block session', () => {
  let fixture: ReturnType<typeof createBlockSessionFixture>

  beforeEach(() => {
    fixture = createBlockSessionFixture()
  })

  it('should create a block session', () => {
    const blockSessionPayload: BlockSession = {
      id: 'block-session-id',
      name: 'block-session-name',
      blocklists: [
        { id: 'blocklist-id', name: 'Distraction', totalBlocks: 10 },
      ],
      devices: [
        {
          id: 'device-id',
          type: 'ios',
          name: 'Huawei P30',
        },
      ],
      start: '2021-01-01T00:00:00Z',
      end: '2021-01-01T00:00:00Z',
    }

    fixture.when.creatingBlockSession(blockSessionPayload)

    fixture.then.blockSessionsShouldBe([
      {
        id: 'block-session-id',
        name: 'block-session-name',
        blocklists: [
          { id: 'blocklist-id', name: 'blocklist-name', totalBlocks: 10 },
        ],
        devices: [
          {
            id: 'device-id',
            type: 'ios',
            name: 'Huawei P30',
          },
        ],
        start: '2021-01-01T00:00:00Z',
        end: '2021-01-01T00:00:00Z',
      },
    ])
  })
})

create-block-session.fixture.ts #

export function createBlockSessionFixture() {
  const store: AppStore = createStore({
    blockSessionRepository: new FakeDataBlockSessionRepository(),
  })

  return {
    when: {
      creatingBlockSession: async (payload: BlockSession) => {
        await store.dispatch(createBlockSession(payload))
      },
    },
    then: {
      blockSessionsShouldBe: (expectedBlockSessions: BlockSession[]) => {
        const retrievedBlockSessions =
          store.getState().blockSession.blockSessions
        expect(retrievedBlockSessions).toStrictEqual(expectedBlockSessions)
      },
    },
  }
}

测试失败错误信息 #

{
  id: 'block-session-id',
  name: 'block-session-name',
  blocklists: [ { id: 'blocklist-id', name: 'Distraction', totalBlocks: 10 } ],
  devices: [ { id: 'device-id', type: 'ios', name: 'Huawei P30' } ],
  start: '2021-01-01T00:00:00Z',
  end: '2021-01-01T00:00:00Z'
}

AssertionError: expected [] to strictly equal [ { id: 'block-session-id', …(5) } ]
<点击查看差异>

    at Object.blockSessionsShouldBe (/Users/arthurmehmetoglu/Development/TiedSiren/src/core/block-session/usecases/create-block-session.fixture.ts:22:40)
    at /Users/arthurmehmetoglu/Development/TiedSiren/src/core/block-session/usecases/create-block-session.usecase.spec.ts:32:18
    at file:///Users/arthurmehmetoglu/Development/TiedSiren/node_modules/@vitest/runner/dist/index.js:128:14
    at file:///Users/arthurmehmetoglu/Development/TiedSiren/node_modules/@vitest/runner/dist/index.js:59:26
    at runTest (file:///Users/arthurmehmetoglu/Development/TiedSiren/node_modules/@vitest/runner/dist/index.js:675:17)
    at runSuite (file:///Users/arthurmehmetoglu/Development/TiedSiren/node_modules/@vitest/runner/dist/index.js:793:15)
    at runSuite (file:///Users/arthurmehmetoglu/Development/TiedSiren/node_modules/@vitest/runner/dist/index.js:793:15)
    at runFiles (file:///Users/arthurmehmetoglu/Development/TiedSiren/node_modules/@vitest/runner/dist/index.js:842:5)
    at startTests (file:///Users/arthurmehmetoglu/Development/TiedSiren/node_modules/@vitest/runner/dist/index.js:851:3)
    at file:///Users/arthurmehmetoglu/Development/TiedSiren/node_modules/vitest/dist/chunks/runtime-runBaseTests.QReNMrJA.js:114:7

已排查内容 #

• createBlockSession异步thunk已正确派发
• createBlockSession.fulfilled动作的payload符合预期
• 状态中的blockSessions数组已正确修改
• 获取状态时已正确访问blockSessions数组

尽管做了这些排查，状态仍未如预期更新。请问可能是什么问题导致的？

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