Redux - ошибка: действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий. перевождь-обещание

Question

Теперь, после решения этой проблемы, здесь REDUX - Как импортировать функцию API, возвращающую Promise, и добавить ее в полезную нагрузку при создании действий

У меня есть следующая ошибка:

Ошибка: действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий. ▶ 3 стековых кадра были свернуты. App.componentWillMount src / component / App.js: 18 15 | } 16 | 17 | componentWillMount () {

18 | const data = this.props.fetchBetList (); 19 | this.setState ({items: data}) 20 | } 21 | Просмотреть скомпилировано ▶ 24 стековых кадра были свернуты../src/index.js src / index.js: 31 28 |
29 | const createStoreWithMiddleware = applyMiddleware (ReduxPromise) (createStore); 30 | 31 | ReactDOM.render (32 | 33 | 34 | Просмотр скомпилирован ▶ 6 кадров стека были свернуты. Этот экран виден только в процессе разработки. Он не будет отображаться, если приложение выйдет из строя на рабочем месте. Откройте консоль разработчика браузера, чтобы дополнительно проверить эту ошибку.

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

Я пытался получить разрешение Promise и использовать метод жизненного цикла для обновления state.items....