Error "Actions must be plain objects. Use custom middleware for async actions". How to decide?

Question

React

There is a smart component:

function MethodWrapper(props) {
  const API_METHOD = [
      ...
  ]

  function submitHandler(event) {
    event.preventDefault()

    if (!props.method && !props.url) {
      showAlert("Название поста не может быть пустым")
      console.log(props)
    }
  }

  return (
    <form onSubmit={submitHandler}>
      <Input />
      <div className={style.methodWrapper}>
        <Methods isActive={props.method} methodList={API_METHOD}/>
      </div>
    </form>
  )
}

const mapDispatchToProps = {
  showAlert, getURL, getMethod
}

const mapStateToProps = state => ({
  alert : state.alert,
  url : state.url,
  method : state.method
})

export default connect(mapStateToProps, mapDispatchToProps)(MethodWrapper)

When I click on Submit, I see an error Error: Actions must be plain objects. Use custom middleware for async actions. . Complains about props.showAlert("Post title cannot be empty") . showAlert is an action that accepts text and writes to the store. How to get rid of the error?

showAlert action:

export function showAlert(text) {
  return dispatch => {
    dispatch({
      type: SHOW_ALERT,
      payload: text
    })
  }
}

rootReducer:

import {HIDE_ALERT, SHOW_ALERT, REQUES_METHOD, GET_URL} from "./type";

export const initialState = {
  alert : null,
  url : null,
  method : null
}

export const rootReducer = ( state = initialState, action) => {
  switch (action.type) {
    ...
    case SHOW_ALERT:
      return {...state, alert : action.payload}
    ...
    default : return state
  }
}

Answer 1

The action must return an object

export const showAlert = text => ({
   type: SHOW_ALERT,
   payload: text
});

Answer 2

Learn how to properly connect to the Tutac store
Pay attention to mapDispatchToProps.