Actions must be plain objects. Instead, the actual type was: 'Promise'. ---- already used thunk

Question

I already used thunk middlewares but still getting errors why is that? ------- What am I missing?

App.js

  useEffect(() => {
    dispatch(getPosts())
  }, [dispatch])

Actions file:

import * as api from "../api/index"

export const getPosts = async dispatch => {
    try {
        const { data } = await api.fetchPosts()
        dispatch({ type: "GET_ALL", payload: data })
    } catch (error) {
        console.log(error)
    }

Reducers File:

export const reducers = (posts = [], action) => {
    switch (action.type) {
        case "GET_ALL":
            return action.payload

        default:
            return posts
    }
}

Store File:

import thunk from "redux-thunk";
import { reducers } from "../reducers/index"
import { createStore, applyMiddleware, compose } from 'redux';


const store = createStore(reducers, compose(applyMiddleware(thunk)))
export default store

Answer 1

You have a thunk there, not a thunk action creator.

So either you do

dispatch(getPosts)

or you do

export const getPosts = () => async dispatch => {

That said, you are writing a very outdated style of Redux here - in modern Redux (since 2019) you don't write swich...case reducers, ACTION_TYPES, immutable reducer logic or action creators by hand. You also should not use createStore (which by now is deprecated), compose or applyMiddleware.

Please read Why Redux Toolkit is How To Use Redux Today. Modern Redux is about 1/4 of the code.

You are probably following a very outdated tutorial. I'd recommend you follow the official Redux Tutorial instead.