React Redux: TypeError: prepareAction is not a function

Question

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

Below is 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.

Answer 1

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();
}, []);