React Redux报错：TypeError: prepareAction is not a function 求助

错误根源 #

你的absence.action.js中createAction的用法完全错误。@reduxjs/toolkit的createAction本身就是用来生成action creator函数的，不需要额外包裹一层函数。当前写法会导致每次调用setAbsences时重新创建action，且错误地将payload数据当作prepareAction函数传入（该参数要求是函数类型），这直接触发了prepareAction is not a function错误。

具体修复步骤 #

1. 修正Action定义 #

修改absence.action.js，直接用createAction生成action creator：

import { createAction } from "@reduxjs/toolkit";
import { ABSENCE_ACTION_TYPES } from "./absences.types";

// 直接生成action creator，无需额外包装
export const setAbsences = createAction(ABSENCE_ACTION_TYPES.SET_ABSENCES);

此时setAbsences就是可接收payload的action creator，调用setAbsences(数据)会自动生成格式正确的action对象。

2. 修正API响应数据获取 #

Axios请求返回的result是完整响应对象，实际接口数据存储在result.data属性中，需修改dispatch参数：

// App.js中的getAbsences函数
const getAbsences = async () => {
  const result = await axios.get(`https://front-end-kata.brighthr.workers.dev/api/absences`);
  // 传入接口返回的实际数据，而非整个响应对象
  dispatch(setAbsences(result.data));
};

3. 修正Store初始状态（可选但推荐） #

store.js中直接传入INITIAL_STATE不符合根reducer的结构要求，需调整为匹配combineReducers的键名：

// store.js
export const store = createStore(
  rootReducer,
  // 根初始状态对应combineReducers的key
  { absences: INITIAL_STATE },
  composedEnhancers
);

额外优化（可选） #

既然已使用@reduxjs/toolkit，推荐用createSlice统一管理reducer和action，简化代码并避免手动维护action type：
创建absence.slice.js：

import { createSlice } from "@reduxjs/toolkit";

const initialState = { absences: [] };

const absenceSlice = createSlice({
  name: "absences",
  initialState,
  reducers: {
    setAbsences: (state, action) => {
      state.absences = action.payload;
    }
  }
});

export const { setAbsences } = absenceSlice.actions;
export const absenceReducer = absenceSlice.reducer;

随后修改root-reducer.js引入该reducer，同时可删除手动编写的absence.types.js、absence.reducer.js和absence.action.js，减少冗余代码。

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