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

Question

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!

score 0 · Answer 1 · answered Oct 31 '22 at 07:26

0

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>

answered Oct 31 '22 at 07:26

Tushar Shahi

16,452
1
18
39

It doesn't work. It doesn't fire the action like that. Funny thing is that i have other calls like one i mentioned that work just fine like const handleSubmit = (e) =>{ e.preventDefault(); dispatch(createCourse({...courseData, hostName: user.userObject !== undefined ? user.userObject.name : user.result.name})); closeForm(!closeForm); } – Vlada Stefanovic Oct 31 '22 at 07:38
Can there be some problem with thunk Middleware, maybe i should update projet to redux tools, as it is newer way of doing redux? – Vlada Stefanovic Oct 31 '22 at 07:46

score 0 · Answer 2 · answered Oct 31 '22 at 10:58

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.

Thank you, i will try to implement Redux toolkit and find out if it will work then. I figured that there is no direct problem in my code. — Vlada Stefanovic, Oct 31 '22 at 11:34

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

2 Answers2