错误:操作必须是纯对象。对异步操作使用自定义中间件。-即使操作也包含该方法

// app.js

import React, { Component } from 'react';
import {connect} from 'react-redux';
import * as actions from './actions'

class App extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.fetchData}>Show Data</button>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {

  }
}


const mapDispatchToProps = dispatch => {
  return {
    fetchData: () => dispatch(actions.fetchDataHandler)
  }
}



export default connect(mapStateToProps, mapDispatchToProps)(App);


// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {createStore} from 'redux';
import Data from './reducers';
import {Provider} from 'react-redux';

const store = createStore(Data)

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
registerServiceWorker();


//actions-index.js

export const fetchDataHandler = e => dispatch => {
    console.log("hit here");
}

//reducers-index.js

// default state
const defaultState = {
    data: null
}

let data;

export default data = (state=defaultState, action) => {
    switch(action.type){
        case "FETCH_DATA": 
            return {
                ...state,
                data: action.payload
            }
        default:
            return{
                ...state
            }
    }
}