React-Redux - Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions

Question

I am new to react redux and I am trying to dispatch an action, but it is showing

Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions

Here is my action creator:

import axios from "axios";
import { GET_CHART_DATA, GET_CHART_DATA_ERROR } from "../actionTypes";

export const getChartData = async () => {
  try {
    const { data } = await axios.get(
      "https://example.com/api"
    );
    console.log("data", data);
    return { type: GET_CHART_DATA, payload: data };
  } catch (error) {
    return { type: GET_CHART_DATA_ERROR, error: error };
  }
};

reducer:

import { GET_CHART_DATA, GET_CHART_DATA_ERROR } from "../actionTypes";

const chartDataReducer = (state = {}, action = {}) => {
  console.log("action", action);
  switch (action.type) {
    case GET_CHART_DATA:
      return { ...action.payload };
    case GET_CHART_DATA_ERROR:
      return { ...action.error };
    default:
      return { ...state };
  }
};

export default chartDataReducer;

I am dispatching the action like this:

const dispatch = useDispatch();

  useEffect(() => {
    (async () => {
      dispatch(getChartData());
    })();
  }, [dispatch]);

Store:

const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(thunk))
  );

How can I correct this error?

Your action returns a function, not an object. Are you using any async middleware (i.e. Thunk middleware)? Can you share how you're creating your redux store? — Drew Reese, Sep 04 '21 at 05:38
@DrewReese Yes I am using thunk as a middleware. I have edited the question and added the store also — Yogeshwar Chaturvedi, Sep 04 '21 at 06:07
Does this answer your question? [React-Redux: Actions must be plain objects. Use custom middleware for async actions](https://stackoverflow.com/questions/46765896/react-redux-actions-must-be-plain-objects-use-custom-middleware-for-async-acti) — Timor, Sep 04 '21 at 06:11

score 1 · Accepted Answer · edited Sep 04 '21 at 08:50

Your getChartData is an async function and since you invoke it in your useEffect it returns a Promise, and as you see, Action must be a plain object.

You should either await the promise result before dispatching it.

const dispatch = useDispatch();

useEffect(() => {
  (async () => {
     dispatch(await getChartData());
   })();
 }, [dispatch]);

Or if you are using thunk middleware (is applied per default when using ReduxToolkit) return a thunk action in your getChartData

React-Redux - Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions

1 Answers1

Linked