react-redux, thunk middleware installed, class component - error "Actions must be plain objects. Instead, the actual type was: 'Promise'" dispatch

Question

mern stack, using a class component I call Landing I use the componentDidMount method. on form submit axios is using the get method to return my user object. I am then dispacting my user object with an exported function to my store. Recieving this error: Actions must be plain objects. Instead, the actual type was: 'Promise'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. I export default the Landing component by executing connect and passing the action I had exported followed by the execution of Landing. The index.js file is currently utilizing redux-thunk middleware.

My goal is to update the state of user so all components immediately display the content that is changing on the form submit.

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

import { reducers } from './reducers';
import App from './components/App';


const store = createStore(reducers, {}, compose(applyMiddleware(thunk)));

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'),
);

Landing.js

import React from 'react';
import { io } from 'socket.io-client';
import _ from 'underscore';
import { connect } from 'react-redux'

import './styles.css';
import { bid } from '../../actions/auction';
import { bidPlaced, loggedUser } from '../../api/index'; 
import { CONNECTION_PORT } from '../../config';




class Landing extends React.Component {

constructor(props) {
        super(props);
        this.state = {
             user: ''
        }
        componentDidMount() {
             this.setState({user: JSON.parse(localStorage.getItem('profile))}) //sets the logged in user to state 
        }
        handleFormSubmit = async (e) => { //This function is wrapped in tryCatch in my app
             e.preventDefault()
             //Storing user data in an object
             const userData = {email: this.state.user.result.email, id: this.state.user.result._id}
             const response = await loggedUser(userData)
             //which returns a promise, which does currently hold the updated userModel
             this.props.bid(response)
        }
        render (
             <div>
               <form onSubmit={handleFormSubmit}>
                     <input value={'all the user information'}>
                     <button type="submit">Click Me</button> 
               <form/>
        )
}

export default connect(null, { bid })(Landing);

in my actions directory: auction.js

export const bid = async (user) => ({
    type: EDIT,
    data: user
});

reducers bid.js

import * as actionType from '../constants/actionTypes';
let payload = null
if (localStorage.getItem('profile')) payload = localStorage.getItem('profile')

const bidReducer = (state = { authData: payload }, action) => {
    switch (action.type) {
        case actionType.EDIT:
            
            localStorage.setItem('profile', JSON.stringify({ ...action?.data }));

            return { ...state, authData: action.data, loading: false, errors: null };

        default:
            return state;
    }
};

export default bidReducer;

Answer 1

Just remove async in the bid

export const bid = (user) => ({
    type: EDIT,
    data: user
});