Почему вываливается Actions must be plain objects. Use custom middleware for async actions если мидл подключен?

Question

[bpGusar]

store.tsx

import {
  createStore as createReduxStore,
  applyMiddleware,
} from 'redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension'
import rootReducer from './reducers'
import {configJsonSchema} from '../json-schemas'
import validateConfig from '../app/validate-config'
import {Config} from '../types'

const parseConfig = (jsonConfig: Config): any => {
  return {
    config: jsonConfig,
  }
}

export default function createStore(config: Config): any {
  const initialState = parseConfig(config)
  const checkSchemaResult = validateConfig(
    config,
    configJsonSchema,
  )
  if (checkSchemaResult === true) {
    return createReduxStore(
      rootReducer,
      initialState,
      composeWithDevTools(applyMiddleware(thunk)),
    )
  } else {
    throw checkSchemaResult
  }
}

index.tsx

import 'babel-polyfill'
import * as React from 'react'
import {render} from 'react-dom'
import {Provider} from 'react-redux'
import App from './ui/app'
import createStore from './store/store'
import {Config} from './types'

export default function initFeature(options: {
  rootEl: HTMLElement
  config: Config
}): void {
  render(<Component config={options.config} />, options.rootEl)
}

export const Component: React.SFC<{config: Config}> = (
  props: any,
): any => {
  return (
    <Provider store={createStore(props.config)}>
      <App />
    </Provider>
  )
}

Условная функция которая вызывает экшн:

private handleSetCountryInStore = (
    e: React.FormEvent<HTMLButtonElement>
  ): any => {
    const countryId: number = Number(e.currentTarget.dataset.id);
    this.props.selectCountry(this.props.config.countries[countryId]);
  };

Экшн:
он просто пока для проверки работы

const selectCountry = (country: any): any => {
  console.log(country);
};

В консоле дважды ошибка после срабатывания экшена:

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

Что не так в данном коде? createStore создан по докам, мидл есть, но выдает ошибку.

Comments

[Максим]

bpGusar приложите код экшена

[bpGusar]

Максим, добавил

Answer 1

[Максим]

const selectCountry = (country: any): any => {
  console.log(country);
  return {
     type: 'MY_TEST_ACTION',
  }
};

если используете короткую запись, то console.log не добавить. Не забывайте про type

const selectCountry = (country: any): any => ({ // добавилось (
  type: 'MY_TEST_ACTION',
}); // добавилось )

ну и собственно проблема: текст ошибки после перевода: экшен должен быть объектом. У вас было undefined, так как не было return { }
Так же у экшена, обязательно должно быть поле type

Comments

[bpGusar]

Работает спасибо. А в чем проблема была? Почему без

return {
     type: 'MY_TEST_ACTION',
  }

не работало нормально?

[Максим]

bpGusar, обновил ответ. Но видимо, нужно еще разбираться, что такое экшены. Посмотрите в туториале