React Redux: TypeError: prepareAction is not a function

I am trying to store some data from an API into my redux store but when I try to dispatch I get this error: TypeError: prepareAction is not a function
I am paste bellow all my code regarding the redux store

store.js

import {compose, legacy_createStore as createStore, applyMiddleware} from "redux";
import logger from "redux-logger";
import { thunk } from "redux-thunk";

import { rootReducer } from "./root-reducer";
import { INITIAL_STATE } from "./absence/absences.reducer";

//middleware

const middleware = [logger, thunk];
const composedEnhancers = compose(applyMiddleware(...middleware));
//root-reducer

export const store = createStore(rootReducer, INITIAL_STATE, composedEnhancers);

root-reducer.js

import { combineReducers } from "redux";

import { absenceReducer } from "./absence/absences.reducer";

export const rootReducer = combineReducers({
   absences: absenceReducer,
});

absence.action.js

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

import { ABSENCE_ACTION_TYPES } from "./absences.types";

export const setAbsences = (absences) =>
   createAction(ABSENCE_ACTION_TYPES.SET_ABSENCES, absences);

absence.reducer.js

import { ABSENCE_ACTION_TYPES } from "./absences.types";

export const INITIAL_STATE = {
   absences: [],
};

export const absenceReducer = (state = INITIAL_STATE, action) => {
   const { type, payload } = action;

switch (type) {
  case ABSENCE_ACTION_TYPES.SET_ABSENCES:
  return { ...state, absences: payload };
  break;
default:
  return state;
}
};

absence.selector.js

export const selectAbsences = (state) => state.absences;

absence.types.js

export const ABSENCE_ACTION_TYPES = {
  SET_ABSENCES: "SET_ABSENCES",
};

App.js

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import axios from "axios";

import "./App.css";
import { setAbsences } from "./store/absence/absences.action";
import { selectAbsences } from "./store/absence/absences.selectors";

function App() {
  const absences = useSelector(selectAbsences);
  const dispatch = useDispatch();

useEffect(() => {

const getAbsences = async () => {
  const result = await axios.get(
    `https://front-end-kata.brighthr.workers.dev/api/absences`
  );
  
  dispatch(setAbsences(result));
  
};
getAbsences();
}, []);

return (
  <div className="App">
    <h1>List of absences</h1>
  </div>
);
}

export default App;

I have checked the api call is working fine I am getting the data, but when it hits the dispatch it gives me that error, I am new to redux so any help would be greatly appreciated. Thank you in advance.

>Solution :

I believe you are not correctly using createAction.
Instead of doing

import { ABSENCE_ACTION_TYPES } from "./absences.types";

export const setAbsences = (absences) =>
  createAction(ABSENCE_ACTION_TYPES.SET_ABSENCES, absences);

Try

import { ABSENCE_ACTION_TYPES } from "./absences.types";

export const setAbsences = (absences) => ({
  type: ABSENCE_ACTION_TYPES.SET_ABSENCES,
  payload: absences,
});

Make sure you make the necessary changes in App.js too

useEffect(() => {
  const getAbsences = async () => {
    try {
      const result = await axios.get(
        `https://front-end-kata.brighthr.workers.dev/api/absences`
      );
      dispatch(setAbsences(result.data));
    } catch (error) {
      console.error("Error fetching absences:", error);
    }
  };
  getAbsences();
}, []);