Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
24 days ago

Reworded: Only plain objects are allowed for a single action.

The dispatch function is used to trigger an action in Redux. While several actions are successfully triggered using the dispatch function, one action is resulting in an error that says "actions must be plain objects". The problematic action is making requests just like the other actions. The issue has nothing to do with the Redux store or middleware. It appears that the dispatch function is unable to handle the specific action.
Answers(2)
avatar
Vogi
24 days ago
Verified Answer
The error message "actions must be plain objects" is usually caused by dispatching a function instead of an object. Actions are meant to be plain JavaScript objects and must have a type property that indicates the type of action being performed. You can fix this error by using middleware such as redux-thunk for API call purposes to avoid this issue. If you are using an AJAX call (asynchronous call) directly in your action, you will get this error. You can fix this error by dispatching the values after the async request ends to correct the plain objects and initiate the commands. I hope this helps!

Sources

Uncaught Error: Actions must be plain objects? - Stack OverflowActions must be plain objects. Instead, the actual type was: 'function'Actions Must Be Plain Objects. Use Custom Middleware for Async Actionsredux thunk - How do I resolve "Actions must be plain objects. Use ...reactjs - Fix the error: Actions must be plain objects. Instead, the ...
avatar
Tolerim
24 days ago
The error message "actions must be plain objects" usually occurs when you try to dispatch a function instead of an object in Redux. It seems like the deletePost action that is causing the error is a thunk function that is not returning a plain object. To fix this error, you need to make sure that your thunk action returns an object with a type property, which is a plain string that describes the action that occurred. In your deletePost action, you are dispatching two actions, but you are not returning any object. To fix the error, you can modify your deletePost action to return an object after you have dispatched the other actions: 
export const deletePost = (id, posts, setPostDeleteLoading) => async (dispatch) => {
  try {
    const response = await axios.delete(
      `http://localhost:5000/api/posts/deletepost/${id}`
    );

    dispatch({
      type: 'posts/setPosts',
      payload: posts.filter((post) => post._id !== id),
    });

    setPostDeleteLoading('');

    dispatch({
      type: 'alert/showAlert',
      payload: {
        msg: response.data.msg,
        success: true,
      },
    });

    return { type: 'DELETE_POST_SUCCESS' }; // Return a plain object with type property
  } catch (err) {
    dispatch({
      type: 'alert/showAlert',
      payload: {
        msg: err.response.data.msg,
        success: false,
      },
    });

    return { type: 'DELETE_POST_ERROR' }; // Return another plain object with type property
  }
};
By adding a return statement at the end of your deletePost action, you are making sure that the action returns a plain object with a type property. Regarding your second question about why some actions work but others don't, it's not possible to determine the exact reason without seeing the actual code and error messages. However, it could be due to issues with your action creators or reducers not being set up correctly. It's recommended that you check your code for any syntax errors or incorrect usage of Redux functions.
;