CODEWITHSUNDEEP
javascripthtmlreactjsredux
Devesh Kumar
Devesh Kumar

Reputation: 186

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

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?

enter image description here

  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,
    },
  });
};

Upvotes: 0

Views: 55

Answers (1)

Hassan Naqvi
Hassan Naqvi

Reputation: 1061

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

Upvotes: 1

Related Questions