Actions must be plain objects. Use custom middleware for async actions error eventhough useing thunk as middleWare

Question

I got this error:

"Actions must be plain objects. Use custom middleware for async actions." even though i use thunk as a middleWare.

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { allReducers } from './reducers';
import thunk  from 'redux-thunk';
import { getAllCourses } from './../../utils/courseServices';

export const store = createStore(allReducers, composeWithDevTools(
  applyMiddleware(thunk),
  // other store enhancers if any
));

//initiliaze
store.dispatch(getAllCourses())

//subscribe
store.subscribe(()=>console.log(store.getState()))

and also my action:

import { getAllCourses } from "../../utils/courseServices"

export const courseAction = () =>{
  return async dispatch =>{
    //fetching data from server
    const {data} = await getAllCourses()
    await dispatch({type:"INIT" , payload: data.courses})
  }
}

Answer 1

You are dispatching getAllCourses there, not courseAction. That's probably your problem.

Also, please be aware that in new code you should be using configureStore of @reduxjs/toolkit, not createStore. Modern Redux does not use switch..case reducers, ACTION_TYPES, immutable reducer update logic, hand-written action creators or connect/mapStateToProps. (And that is nothing new, but the recommendation since 2019).

You are probably following an outdated tutorial - please follow the official Redux tutorial