Ошибка «Actions must be plain objects. Use custom middleware for async actions». Как решить?

Question

[uRoot]

Есть умный компонент:

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)

При клике на Сабмит, я вижу ошибку Error: Actions must be plain objects. Use custom middleware for async actions.. Жалуется на props.showAlert("Название поста не может быть пустым"). showAlert - это экшин, который принимает текст и пишет в стор. Как избавиться от ошибки?

Экшин showAlert:

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
  }
}

Comments

[Дмитрий]

Важно ни в коем случае не показывать код функции, на которой возникает ошибка, это же абсолютно неважно

[uRoot]

Дмитрий, обновил пост.

[uRoot]

Дмитрий, ага:

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

Диспатчи, кажеться, сдесь лишние

[Дмитрий]

CryNet, showAlerrt При таком подходе экшн должен возвращать просто объект

return { type: SHOW_ALERT, payload: text }

[uRoot]

Дмитрий, да, я понял. Спасибо.

Answer 1

[Loli E1ON]

Экшен должен возвращать обьект

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

Answer 2

[Nikolay Matyushkin]

Ознакомьтесь с тем, как нужно правильно коннектиться со стором тутачки

Обратите внимание на mapDispatchToProps.