Redux error when submitting a form: Actions must be plain objects. Instead, the actual type was: 'Promise'

Question

I'm trying to submit a form using Redux, however, getting an error message in the console: Uncaught Error: Actions must be plain objects. Instead, the actual type was: 'Promise'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions.

I am already using thunk as my middleware when creating the store. Here's the code:

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

create post action:

export const createPosts = (post) => async (dispatch)=>{
  try {
    const {data} = await api.createPost(post)

    dispatch({type:'CREATE', payload:data})
  } catch (error) {
        console.log(error.message);

  }
}

PS: submit form works after page is refreshed

Adding the requested code as per in the comments:

createPost controller:

export const createPost = async (req, res) => {
  const { title, message, selectedFile, creator, tags } = req.body;

  const newPostMessage = new PostMessage({
    title,
    message,
    selectedFile,
    creator,
    tags,
  });

  try {
    await newPostMessage.save();

    res.status(201).json(newPostMessage);
  } catch (error) {
    res.status(409).json({ message: error.message });
  }
};

reducer index.js


import posts from "./posts";

export default combineReducers({
    posts,
})

post reducers:

  switch (action.type) {
    case 'UPDATE':
      return posts.map((post)=>post._id === action.payload._id ? action.payload : post)
    case "FETCH_ALL":
      return action.payload;
    case "CREATE":
      return [...posts, action.payload];

    default:
      return posts;
  }
};

seems like you are not returning anything from the try catch ... — KcH, Nov 21 '22 at 12:58
Can you show where you're dispatching the thunk? Also, you should know that you're writing a _very_ outdated style of Redux code. Modern Redux with Redux Toolkit is much easier to set up, learn, and use: https://redux.js.org/tutorials/index . — markerikson, Nov 22 '22 at 02:43

score 0 · Answer 1 · answered Nov 21 '22 at 08:24

0

As the error suggests, you cannot have an async function as an action, even with thunk.

Thunk allows you to return an async response, not call an async action. So the proper way to do this would be:

export const createPost = post => (dispatch, getState) => {
  api.createPost(post)
    .then(data => dispatch({ type: "CREATE", payload: data}))
    .catch(e => console.log(e))
}

Assuming that the declaration of createPost is an async function or it returns a call to an async function.

answered Nov 21 '22 at 08:24

no_modules

117
7

Applied your code and still receiving the same error. api.createPost is an async function too. – Süleyman Eminbəyli Nov 21 '22 at 08:31
Can you post the api.createPost definition and double-ckeck that thunk is set up correctly? – no_modules Nov 21 '22 at 08:34
sure, updating the original post now – Süleyman Eminbəyli Nov 21 '22 at 08:39
could you try to return something from your function in the try/except block? – no_modules Nov 21 '22 at 13:28

Redux error when submitting a form: Actions must be plain objects. Instead, the actual type was: 'Promise'

1 Answers1