Redux Toolkit使用createAsyncThunk报reading 'fulfilled'错误如何解决

错误原因 #

核心问题是循环依赖（循环导入）：

• editCheckthunk.js 文件中导入了上层目录 RuleDataSlice 导出的 clearRuleData
• RuleDataSlice.js 文件又导入了下层 services/editCheckthunk 导出的多个异步thunk
  两个文件互相引用，模块加载过程中先被解析的文件拿到的另一个文件的导出内容为undefined，因此访问getEditCheckById.fulfilled时就会抛出对应错误。

解决方案 #

方案1：拆分公共代码解耦依赖 #

将两个文件都要用到的clearRuleData抽离到独立公共文件，避免循环导入：

1. 新建公共action文件 src/reduxStore/slices/edit-checks/commonActions.js：

import { createAction } from '@reduxjs/toolkit'
import { push } from 'connected-react-router'

export const clearRuleData = createAction(
    'ruledata/clearformdata',
    function prepare() {
        return (dispatch) => {
            dispatch(push('/edit-checks/new'))
        }
    }
)

2. 删除RuleDataSlice.js中原有的clearRuleData定义，改为从上述公共文件导入
3. 修改editCheckthunk.js中clearRuleData的导入路径，改为从上述公共文件导入

方案2：改用builder回调形式写extraReducers #

Redux Toolkit官方更推荐的写法，对循环依赖的容忍度更高，不需要在定义slice阶段就拿到thunk的完整引用：
将RuleDataSlice.js中的extraReducers部分替换为以下代码：

extraReducers: (builder) => {
    builder
        .addCase(clearRuleData, (state, action) => {
            state.ruleData = initialState.ruleData
        })
        .addCase(getEditCheckById.fulfilled, (state, action) => {
            state.ruleData = action.payload
        })
        .addCase(createRuleData.pending, (state, action) => {
            state.ruleDataLoader = true
        })
        .addCase(createRuleData.fulfilled, (state, action) => {
            state.ruleDataLoader = false
            state.ruleData.id = action.payload
        })
        .addCase(createRuleData.rejected, (state, action) => {
            state.ruleDataLoader = false
        })
        .addCase(updateRuleDataForm.pending, (state, action) => {
            state.ruleDataLoader = false
        })
        .addCase(updateRuleDataForm.fulfilled, (state, action) => {
            state.ruleDataLoader = false
            state.ruleData.id = action.payload
        })
        .addCase(updateRuleDataForm.rejected, (state, action) => {
            state.ruleDataLoader = false
        })
        .addCase(getECDomains.fulfilled, (state, action) => {
            state.dataset_data.domains = action.payload
        })
        .addCase(getECDomainCols.fulfilled, (state, action) => {
            const { domain, cols } = action.payload
            state.dataset_data.domain_cols = {
                ...state.dataset_data.domain_cols,
                [domain]: cols,
            }
        })
}

补充优化建议 #

你当前的所有thunk的catch分支只打印了错误，没有返回thunkAPI.rejectWithValue(error)，会导致即使接口请求失败也不会触发rejected状态，建议给所有thunk补充该逻辑：

catch (error) {
    console.error('请求错误:', error)
    return thunkAPI.rejectWithValue(error)
}

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