Redux 工具包 - 分派 createBlockSession 异步 thunk 后状态未更新

Question

标题：Redux Toolkit - 分派后状态未更新

createBlockSession

async 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) } ]
<Click to see difference>

    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

我检查了以下内容：

1. createBlockSession

   异步 thunk 正在正确调度。

2. createBlockSession.fulfilled

   操作的有效负载符合预期。
3. 状态中的

   blockSessions

   数组正在正确变异。
4. 状态中的

   blockSessions

   数组在检索时正在被正确访问。

尽管进行了所有这些检查，状态并未按预期更新。关于可能出什么问题的任何想法吗？

可以在此处访问 Github 存储库：https://github.com/amehmeto/TiedSiren

Answer 1

好的，我找到了我的问题。我需要使我的 testFixture 异步，以便状态生效：

await fixture.when.creatingBlockSession(blockSessionPayload)