标题: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
我检查了以下内容:
createBlockSession
异步 thunk 正在正确调度。createBlockSession.fulfilled
操作的有效负载符合预期。blockSessions
数组正在正确变异。blockSessions
数组在检索时正在被正确访问。尽管进行了所有这些检查,状态并未按预期更新。关于可能出什么问题的任何想法吗?
可以在此处访问 Github 存储库:https://github.com/amehmeto/TiedSiren
好的,我找到了我的问题。我需要使我的 testFixture 异步,以便状态生效:
await fixture.when.creatingBlockSession(blockSessionPayload)