redux 中调度操作的意外行为

Question

我有以下异步 thunk 函数：

const loadProject = createAsyncThunk(
  '[Project API] Load Project',
  async (project: IKProject, { dispatch }) => {
    await kProjectService.loadProject(project)

    localStorage.setItem(STORAGE_KEY, project)
    dispatch(projectActions.setLoadedProject(project))

    // Loading & saving the project configuration
    const config = await kProjectService.getProjectConfig(project)
    dispatch(projectActions.setProjectConfig(config))
  }
)

const unLoadProject = createAsyncThunk(
  '[Project API] Un Load Project',
  async (project: IKProject, { dispatch }) => {
    await kProjectService.closeProject(project)
    dispatch(projectActions.resetState())
  }
)

const refreshProject = createAsyncThunk(
  '[Project API] Refresh Project',
  async (project: IKProject, { dispatch }) => {
    await dispatch(projectActions.unLoadProject(project))
    await dispatch(projectActions.loadProject(project))

    console.log('After refreshing')
  }
)

项目服务：

import { IKProject, IKProjectConfig } from '@/Types'
import { httpService } from './http.service'

function loadProject(project: IKProject): Promise<IKProject> {
  return httpService.post(`/project/load`, project)
}

function loadProjectConfig(project: IKProject): Promise<IKProjectConfig> {
  return httpService.get(`/project/config`, project)
}

function closeProject(project: IKProject): Promise<unknown> {
  return httpService.delete(`/project/${project.name}/close`, project)
}

export const kProjectService = {
  loadProject,
  loadProjectConfig,
  closeProject,
}

项目切片看起来像这样

const projectSlice = createSlice({
  name: '[Project API]',
  initialState,
  reducers: {
    resetState: () => initialState,
    setLoadedProject: (state, action: PayloadAction<IKProject | null>) => {
      state.kLoadedProject = action.payload
    },
    setProjectConfig: (
      state,
      action: PayloadAction<IKProjectConfig | null>
    ) => {
      state.kConfig = action.payload
    },
    reducers...
  },
  extraReducers(builder) {
    builder
      .addCase(projectActions.refreshProject.pending, (state) => {
        state.isRefreshing = true
      })
      .addMatcher(
        isAnyOf(
          projectActions.refreshProject.rejected,
          projectActions.refreshProject.fulfilled
        ),
        (state) => {
          state.isRefreshing = false
        }
      )
  },
  selectors: {
    selectors...
  }
})

isRefreshing

中的

initialState

默认设置为 false。
根据定义的

extraReducers

，它会根据承诺的状态（thunk函数）自动更改，现在我面临的问题是，当

refreshProject

操作执行时，它会立即解决，而不是等待其他人的完成的动作。

调试后，我确实看到

isRefreshing

从

false

->

true

->

false

发生变化

注意：在

console.log('After refreshing')

操作完成后，我确实看到了

loadProject

的输出，这就是为什么我不明白为什么 thunk 会立即解决。

请帮忙。

Answer 1

看起来

resetState()

中的

unLoadProject

操作导致了这里的问题。

已解决：https://github.com/reduxjs/redux-toolkit/issues/4528