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

Your thunk is not really a thunk, it's supposed to be a function that returns a function (notice the two `=>` they normally have). Your function returns a promise. — timotgl, Aug 29 '22 at 09:32
oh Thanks a lot @imotgl, Now it worked, I just used `const store = createStore(reducers, compose(applyMiddleware(() => thunk)))`, and it totally fine now — Riyad Hossain, Aug 29 '22 at 09:48
@RiyadHossain that might make the error disappear but is 100% wrong - it will probably make your app crash in weird ways. — phry, Aug 29 '22 at 11:07

score 1 · Accepted Answer · answered Aug 29 '22 at 11:05

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.

Thank you so much @phry. I really appreciate your effort and support. — Riyad Hossain, Aug 31 '22 at 08:42

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

1 Answers1