Why does Actions must be plain objects fall out. Use custom middleware for async actions if the middle is connected?

Question

React

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

The conditional function that calls the action:

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

Action:
it's just for now to test the work

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

In the console, an error occurs twice after the action is triggered:

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

What is wrong in this code? createStore was created according to the docs, the middle is there, but it gives an error.

Answer 1

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

if you use a short record, then console.log is not added. Don't forget about type

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

Well, actually the problem: the text of the error after the translation: the action must be an object. You had undefined, since there was no return { }
Also, the action must have a type field