Error: Actions must be plain objects. Use custom middleware for async actions. What am I doing wrong?

Question

I'm trying to push these two variables current and duration to the redux store. And I'm getting this error. I'm new to this so can someone please tell me what am I doing wrong?

  const timeUpdateHandler = (e) => {
    const current = e.target.currentTime;
    const duration = e.target.duration;

    dispatch(timerUpdate(current, duration));
  };

This is the action creator in the store file:

export const timerUpdate = (current, duration) => async (dispatch) => {
  console.log(current);

  dispatch({
    type: PLAYER_TIMER_UPDATE,
    payload: {
      currentTime: current,
      duration: duration,
    },
  });
};

Does this answer your question? How do I resolve "Actions must be plain objects. Use custom middleware for async actions.]"? — HMR
– HMR, Commented Dec 10, 2020 at 7:51

Softwared · Accepted Answer · 2020-12-10 07:55:14Z

1

The problem is, your action creator does not return an object but a Promise<object>. This is because of the async keyword before your action creator.

The async keyword wraps the result in a promise. The code chunk you have posted does not have any async functionality so you can safely remove it.

On the other hand, if you do want async actions, try using redux-thunk library as suggested by HMR

answered Dec 10, 2020 at 7:55

Softwared

1,0948 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Devesh Kumar Over a year ago

Hey, I added thunk and now it is working like how it should. That async was put there by mistake. Thanks.

Collectives™ on Stack Overflow

Error: Actions must be plain objects. Use custom middleware for async actions. What am I doing wrong?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related