Reactjs – Error: Actions must be plain objects. Use custom middleware for async actions. Redux/Toolkit

You have a few issues with the way you are trying to use regular reducer functions to handle asynchronous side-effects, and dispatching objects to the store that are neither action objects nor asynchronous action creators, e.g. Thunks.

AddProdToFavorites is a regular function and should be rewritten to use Redux-Toolkit’s createAsyncThunk.

The suggested/recommended patter is to return directly the fetched data or rejected Promise with error value, and use the state slice’s extraReducers to handle the state updates. Remember that with RTK you can write mutable state updates, you don’t need to shallow copy all the state.

import { createAsyncThunk } from "@reduxjs/toolkit";
import apiActions from "../../utils/api";

export const AddProdToFavorites = createAsyncThunk(
  "addProdToFavorites",
  async ({ user_id, prod_id }, thunkApi) => {
    try {
      // api call
      const data = await apiActions.addProdToUserFav(user_id, prod_id);
      return data;
    } catch(error) {
      return thunkApi.rejectWithValue(error);
    }
  },
);

const authSlice = createSlice({
  name: "auth",
  initialState: initialValue,
  reducers: {
    ...
    addFavorites: (state, action) => {
      state.userInfo.favorites = action.payload;
    },
  },
  extraReducers: builder => {
    ...
  },
});

or if you are really wanting to write and keep the extra actions, use the second argument to the thunk to access the dispatch function and dispatch your other actions to the store. Handle these actions in the regular reducers with the same mutable state update.

import { createAsyncThunk } from "@reduxjs/toolkit";
import apiActions from "../../utils/api";
import { addFavorites, addFavoritesError } from "../slices/userSlice";

export const AddProdToFavorites = createAsyncThunk(
  "addProdToFavorites",
  async ({ user_id, prod_id }, thunkApi) => {
    try {
      // api call
      const data = await apiActions.addProdToUserFav(user_id, prod_id);
      thunkApi.dispatch(addFavorites(data));
    } catch(error) {
      thunkApi.dispatch(addFavoritesError(error));
    }
  },
);

const authSlice = createSlice({
  name: "auth",
  initialState: initialValue,
  reducers: {
    ...
  },
  extraReducers: builder => {
    builder
      .addCase(AddProdToFavorites.fulfilled, (state, action) => {
        state.userInfo.favorites = action.payload;
      })
      ...
  },
});

Dispatching AddProdToFavorites action:

function DestinationsDisplayCard({ userToken, name, price }) {
  const dispatch = useDispatch();
  
  const [favored, setFavored] = useState(false);

  const addItemtoFav = () => {
    setFavored((favored) => !favored);
    dispatch(AddProdToFavorites({ userToken, prodId }));
  };

  const removeItemFromFav = () => {};

  return (
    <div className="productCard">
      <p>{name}</p>
      <p>${price}</p>
      {userToken && (
        <button
          onClick={favored ? removeItemFromFav : addItemtoFav}
        >
          ...
        </button>
      }
    </div>
  );
}

In authSlice the login and signup actions/reducers are invalid. Reducer functions are to be pure, synchronous functions. These two actions should also be Thunks, and the UI should handle chaining or await-ing them to settle in order to issue the additional side-effect, e.g. the navigation. It looks like loginUser and registerUser are already RTK Thunks, so remove the login and signup actions/reducers from the authSlice and handle the asynchronous logic in the calling function.

Example:

const authSlice = createSlice({
  name: "auth",
  initialState: initialValue,
  reducers: {
    logOut: (state) => {
      return {
        ...state.initialState,
        isLoading: false,
        userInfo: null,
        userToken: null,
        error: null,
        success: false,
      };
    },
  },
  extraReducers: builder => {
    builder
      .addCase(AddProdToFavorites.fulfilled, (state, action) => {
        state.userInfo.favorites = action.payload;
      })
      .addCase(loginUser.pending, (state) => {
        state.isLoading = true;
        state.error = null;
      })
      .addCase(loginUser.fulfilled, (state, { payload }) => {
        state.isLoading = false;
        state.success = true;
        state.userInfo = payload.data.user;
        state.userToken = payload.token;
      })
      .addCase(loginUser.rejected, (state, { payload }) => {
        state.isLoading = false;
        state.error = payload;
      })
      .addCase(registerUser.pending, (state) => {
        state.isLoading = true;
        state.error = null;
      })
      .addCase(registerUser.fulfilled, (state, { payload }) => {
        state.isLoading = false;
        state.success = true;
        state.userInfo = payload;
        state.userToken = payload.token;
      })
      .addCase(registerUser.rejected, (state, { payload }) => {
        state.isLoading = false;
        state.error = payload;
      });
  },
});

Unwrap the returned resolved Promise to handle the fulfilled/rejected status.

const SomeComponent = () => {
  const dispatch = useDispatch();
  const history = useHistory();

  const loginHandler = async () => {
    try {
      await dispatch(loginUser()).unwrap();
      history.push("/");
    } catch(error) {
      // handle login errors, etc...
    }
  };

  ...
};

or

const SomeComponent = () => {
  const dispatch = useDispatch();
  const history = useHistory();

  const loginHandler = () => {
    dispatch(loginUser()).unwrap()
      .then(() => {
        history.push("/");
      })
      .catch((error) => {
        // handle login errors, etc...
      });
  };

  ...
};