redux dispatch is a not function

Question

前提・実現したいこと

react+redux+typescriptでtodoアプリを作っています。
現在、actionでaxiosを使って外部APIから情報を取得し、それをreducerに渡す実装を行っているのですが、actionでdipatchする際に**「　dispatch is a not function 」というerror**が出ました。
またreducerのactionをconsole.log()で出力すると以下の様なtypeが返ってきました。
![
色々調べてみたのですが、原因を突き止められませんでした。どなたかご教授いただけると助かります。

発生している問題・エラーメッセージ

Uncaught (in promise) TypeError: dispatch is not a function
    at index.tsx:32  <= action/index.tsx(dispatch({ type:READ_EVENTS, response}))のこと
    at Generator.next (<anonymous>)
    at fulfilled (tiny-warning.esm.js:20)

該当のソースコード

action/index.tsx

import axios from "axios";
import { stub } from "./test.stub";

export const READ_EVENTS = "READ_EVENTS";


const ROOT_URL = "https://udemy-utils.herokuapp.com/api/v1";
const QUERYSTRING = "?token=token123";

export async function readEvents(dispatch:any) {
  const response = await axios.get(`${ROOT_URL}/events${QUERYSTRING}`);
  dispatch({ type: 'READ_EVENTS', response });
}

reducer/event.tsx

import { READ_EVENTS } from "../actions/index"

export default (events = {}, action:any) => {
  switch (action.type) {
    case READ_EVENTS:
      console.log(action)
      return action
    default:
      return events
  }
}

component/index.tsx

import React, { Component } from "react";
import { Button, ButtonGroup, Breadcrumb, Row, Col } from "react-bootstrap";
import { Link } from "react-router-dom";
import { readEvents } from "../actions/index";
import { connect } from "react-redux";

class Task extends Component {
  componentDidMount() {
    readEvents(this.state);
    console.log(readEvents(this.state));
  }
  render() {
    console.log(this.props)
    return (
      <div>
        <Row className="justify-content-md-center">
          <Col xs lg="2">
            <Breadcrumb>
              <ButtonGroup vertical>
                <Button variant="outline-warning">
                  <Link to="/task/:id">編集</Link>
                </Button>{" "}
                <Button variant="outline-warning">
                  <Link to="/task/:id">削除</Link>
                </Button>{" "}
              </ButtonGroup>
            </Breadcrumb>
          </Col>
          <Col md="auto">
            <Breadcrumb>日付</Breadcrumb>
          </Col>
          <Col>
            <Breadcrumb>
              <div></div>
            </Breadcrumb>
          </Col>
        </Row>
      </div>
    );
  }
}

const mapStateToProps = (state:any) => ({ events: state.events })
const mapDispatchToProps = { readEvents };

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

store

import React from "react"
import { Provider } from "react-redux"
import { createStore, applyMiddleware } from "redux"
import ReactDOM from "react-dom"
import { BrowserRouter, Route, Switch } from "react-router-dom"
import Main from "./components/main"
import reducer from "./reducer"
import { composeWithDevTools } from "redux-devtools-extension"
import thunk from "redux-thunk"

const store = createStore(reducer, applyMiddleware(thunk))

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        <Route path="/task" component={Main} />
        {/* <Route path='/task/:id' component={Main} />
    <Route path='/task/:id' component={Main} /> */}
      </Switch>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
)

Answer 1

connect の第二引数は dispatch を取り関数を返す関数でなければいけません。
Reduxのconnectについて - Qiita
なのでこの場合

const mapDispatchToProps = (dispatch) => { readEvents(dispatch) };

とするとよいでしょう。

追記：

readEvents(this.state);

を呼び出しているためエラーが出てしまいます。もしここで dispatch したい場合

const mapDispatchToProps = (dispatch) => {{ readEvents: readEvents(dispatch) }};

とし、

this.props.readEvents(this.state)

とすればよいはずです（Redux 久しぶりなので曖昧ですが）。

Comments

[like-here]

ありがとうございます！
おかげでreducerに情報を渡すことができました！
一つ質問なのですが、reducerに値は渡ったのですが、errorがconsole上で消えませんでした。
これは、また違う問題なのでしょうか？
もしお時間あれば助言していただけると助かります！
https://i.gyazo.com/df133d20cccce3ce15b69252471305c4.png

[A_kirisaki]

追記しておきました。ちなみに最新の環境で React が使えるのならばクラスベースの設計でなく関数コンポーネントを、Redux ではなく hooks を使うと楽に書けるようになります。

[like-here]

わざわざ追記していただいてありがとうございます！
大変勉強になりました。