Redux - Error: Actions must be plain objects. Use custom middleware for async actions. redux-promise

Question

Now after resolving the issue here REDUX - How to import an API function returning Promise and add it into payload on action creator

I have the following error:

Error: Actions must be plain objects. Use custom middleware for async actions. ▶ 3 stack frames were collapsed. App.componentWillMount src/component/App.js:18 15 | } 16 | 17 | componentWillMount() {

18 | const data = this.props.fetchBetList(); 19 | this.setState({ items: data }) 20 | } 21 | View compiled ▶ 24 stack frames were collapsed. ./src/index.js src/index.js:31 28 |
29 | const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore); 30 | 31 | ReactDOM.render( 32 | 33 | 34 | View compiled ▶ 6 stack frames were collapsed. This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error.

import React, { Component } from 'react';
import BetList from './BetList';
import './App.css';
import items from '../data/betItems.json';
import { connect } from 'react-redux';
import { fetchBetList, fetchLatestPrices } from '../actions/index';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: []
    }
  }

  componentWillMount() {
    const data = this.props.fetchBetList();
    this.setState({ items: data })
  }

  render() {
    return (
      <div className="App">
        <h1>Tottenham Hotspur v Manchester City</h1>
        <h2>Correct Score</h2>
        <BetList items={this.state.items} />
      </div>
    );
  }
}

export default connect(null, { fetchBetList, fetchLatestPrices })(App);

I tried to obtain resolved Promise and use lifecycle method to update state.items....