Uncaught Error: Actions must be plain objects. Instead, the actual type was: 'Promise' Rea-CodePudding

I have a client-side problem. The server side is working fine, and the deleteCourse method deletes the course, but I get the error you see in the title on the client side. I am not sure what is going on. If I need to provide something else, just ask :D

/actions/courses.js

export const deleteCourse = (id) => async (dispatch) => {
  try {
    await api.deleteCourse(id);
    dispatch({ type: DELETE, payload: id });
  } catch (error) {
    console.log(error);
  }
};

/reducers/courses.js

import { FETCH_ALL, CREATE, UPDATE, DELETE } from '../../constants/actionTypes';
export default (courses = [], action) => {
  switch (action.type) {
    case FETCH_ALL:
      return action.payload;
    case CREATE:
      return [...courses, action.payload];
    case UPDATE:
      return courses.map((course) =>
        course._id === action.payload._id ? action.payload : course
      );
    case DELETE:
      return courses.filter((course) => course._id !== action.payload);
    default:
      return courses;
  }
};

/api/index.js

import axios from 'axios';
//Our route
const API = axios.create({ baseURL: 'http://localhost:5000' });
//Occurse before all the bellow requests
//Za google je result a za klasican je token
API.interceptors.request.use((req) => {
  if (localStorage.getItem('profile'))
    req.headers['Authorization'] = `Bearer ${
      JSON.parse(localStorage.getItem('profile')).token
    }`;

  return req;
});
export const signIn = (formData) => API.post('/user/signIn', formData);
export const signUp = (formData) => API.post('/user/signUp', formData);
export const fetchCourses = () => API.get('/courses');
export const createCourse = (newCourse) => API.post('/courses', newCourse);
export const updateCourse = (id, updatedCourse) =>
  API.patch(`./courses/${id}`, updatedCourse);
export const deleteCourse = (id) => API.delete(`./courses/${id}`);

/index.js


import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../src/api/reducers';
const store = createStore(reducers, compose(applyMiddleware(thunk)));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

/Button that starts the action

<Button size="small" color="primary" onClick={() => {
          dispatch(deleteCourse(course._id))}}><DeleteIcon fontSize="small" /> Delete</Button>

I tried to console.log deleteCourse and I see that it is a resolved promise. Now I am watching some courses on youtube, and making my own project, but all of this is working for that guy just perfectly.

Thank you in advance!

CodePudding user response：

Dispatched actions should be objects like :

{ type: DELETE, payload: id }

but you are dispatching a function here :

 dispatch(deleteCourse(course._id))

Instead of dispatching a function I think you should just call it. Internally your function is dispatching the action you want so you should be good.

<Button size="small" color="primary" onClick={() => {
          deleteCourse(course._id)}}><DeleteIcon fontSize="small" /> Delete</Button>

CodePudding user response：

Generally: you did not configure the redux-thunk middleware, and without that it won't work.

Edit: no, you did - at that point I'm honestly not 100% sure why you are getting that error message then.

But apart from that: you are writing a style of Redux here that is outdated over three years at this point and probably 4 times the amount of code, with more indirection and harder to learn.
You should not write code like this in 2022.

Please read why Redux Toolkit is how to use Redux today and then follow the official Redux tutorial that will teach you RTK from the start.