CODEWITHSUNDEEP
reduxredux-thunk
Riyad Hossain
Riyad Hossain

Reputation: 43

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

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

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

Upvotes: 0

Views: 183

Answers (1)

phry
phry

Reputation: 44136

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.

Upvotes: 1

Related Questions