Redux thunk - Error · Actions must be plain objects. Use custom middleware for async actions even with dispatch an object with key type

Question

Getting below error for specific action functions:

Error · Actions must be plain objects. Use custom middleware for async actions

Below code works fine on my system but loging erros on bugsnag for different users.

React component file:

import React, { Fragment, useEffect, useState, useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';

 const dispatch = useDispatch();
 const handleTabs = tab => {
    dispatch(resetActionType());
    tabChanged(tab);
  };

Action file:

export function resetActionType() {
  return dispatch => {
    dispatch({
      type: 'RESET_ACTION_TYPE',
    });
  };
}

Checking different questions on SO I could understand this error comes when we don't use dispatch or type key in object returned in dispatch. But I am doing both of them.

Error is not happening on all machines/OS/browsers. Coming for a few users only.

What is wrong with the above code? Any guidance would be appreciated.

This is not happening for every action, so I guess configuration is fine.

UPDATE:

I am using redux thunk.

Answer 1

export function resetActionType() {
  return dispatch => {
    dispatch({
      type: 'RESET_ACTION_TYPE',
    });
  };
}

this syntax is used if you setup redux-thunk middleware. the purpose of redux-thunk to make the async request and once the request is resolved, it dispatches the response data. that is why dispatch is passed an argument. since you have no async code inside action creator, you must return a plain object.

When you connect to the store, dispatch already will call that action generator.

 connect(mapStateToProps, { yourActionCreator })(Component);