Redux异步Thunk调度异常:refreshProject提前resolved求助
问题根源
你的resetState reducer会直接将整个状态重置为initialState,而initialState中的isRefreshing默认是false。当refreshProject执行时:
- 首先触发
refreshProject.pending,将isRefreshing设为true - 随后调用
unLoadProject,其中的dispatch(projectActions.resetState())会立刻把整个状态重置回初始值,导致isRefreshing被提前设为false - 但
refreshProject的异步逻辑还在继续执行(等待unLoadProject和loadProject完成),所以你会看到isRefreshing快速切换,而console.log在loadProject完成后才输出——这是因为refreshProject的thunk函数确实在等待内部操作完成,只是isRefreshing被resetState提前修改了。
解决方案
修改resetState的逻辑,只重置项目相关的状态字段,保留isRefreshing的当前值:
const projectSlice = createSlice({ name: '[Project API]', initialState, reducers: { resetState: (state) => { // 只重置项目核心状态,保留isRefreshing return { ...initialState, isRefreshing: state.isRefreshing } }, // 其他reducers... }, // 其他配置... })
或者更精确地指定要重置的字段,避免影响其他状态:
resetState: (state) => { return { ...state, kLoadedProject: initialState.kLoadedProject, kConfig: initialState.kConfig, // 其他需要重置的项目相关字段... // isRefreshing保持当前值不变 } }
修改后的流程
- 触发
refreshProject,isRefreshing变为true unLoadProject执行resetState,仅重置项目状态,isRefreshing保持true- 等待
unLoadProject和loadProject的所有异步操作完成 refreshProject执行完毕,触发fulfilled动作,将isRefreshing设为false
这样isRefreshing会在整个刷新流程中保持true,直到所有操作完成才变回false,符合你的预期。
内容的提问来源于stack exchange,提问作者Y_Moshe
相关产品推荐
相关产品推荐

