React+Redux+TypeScriptでdataが見つからない

Question

前提・実現したいこと

React+Redux+TypeScriptでtodo一覧画面を作成中なのですが、下記のエラーメッセージの通り、データが受け取れません。component/task.tsxというファイルでReduxの状態管理をしているのですが、エラーメッセージが表示されているのは親コンポーネントのcomponent/main.tsxのimortしている<Task />の部分で表示されています。
この場合、型の定義等でどこかずれてしまっているか、またはdispatchするところの記述がずれてしまっているか、という仮説を立て、修正してみたのですが、一向に解決できませんでした。。
どなたか、お力添えいただけると大変助かります！

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

プロパティ 'data' は型 '{}' にありませんが、
型 'Pick<ClassAttributes<Task> & getList, "ref" | "data" | "key">' では必須です。

該当のソースコード

component/task.tsx

import React, { Component } from "react";
import { Button, ButtonGroup, Breadcrumb, Row, Col } from "react-bootstrap";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import { readEvents } from "../actions";
import { ReduxAction } from "../store";
import { State } from "../reducer/events";
interface getList {
  data: {
    taskId: number;
    title: string;
    description: string;
    status: string;
    createTime: string;
    updateTime: string;
    tag?: string;
  }[]
}
class Task extends React.Component<getList,{}> {
  render() {
    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>{this.props.data.title}</Col>
          <Col>{this.props.data.description}</Col>
        </Row>
      </div>
    );
  }
}

// const mapStateToProps = (state: getList) => {
//   return {
//     value: state.data
//   };
// };
// const mapDispatchToProps = (dispatch: Dispatch) => {
//   readEvents();
// };
// export default connect(mapStateToProps, mapDispatchToProps)(Task)
export class ActionDispatcher {
  // constructor(private dispatch: (action: ReduxAction) => void) {}
  constructor(private dispatch: Dispatch<ReduxAction>) {}

  public list() {
    this.dispatch(readEvents());
  }
}
export default connect(
  (state:getList) => ({ value: state.data }),
  (dispatch: Dispatch<ReduxAction>) => ({
    actions: new ActionDispatcher(dispatch),
  })
)(Task);

Action/index.tsx

import axios from "axios";
import { stub } from "./test-stub";
import { Action } from "redux";

// const ROOT_URL = "http://localhost:3000"

//typeの種類
export const Type = {
  read: "READ",
  create: "CREATE",
  update: "UPDATE",
  delete: "DELETE",
} as const;

export type Type = typeof Type[keyof typeof Type];

//actionの型
export interface getAction extends Action {
  type: string,
  data: {
    taskId: number;
    title: string;
    description: string;
    status: string;
    createTime: string;
    updateTime: string;
    tag?: string[];
  }[];
}


export const readEvents = (): getAction => ({
  type: Type.read,
  data: stub,
});

export type todoActions = getAction

Reducer/events.tsx

import { todoActions, Type } from "../actions/index";
export interface State {
  type?: string;
  data: {
    taskId: number;
    title: string;
    description: string;
    status: string;
    createTime: string;
    updateTime: string;
    tag?: string[];
  }[];
}

export const initialState: State = {
  data: [
    {
      taskId: 0,
      title: "",
      description: "",
      status: "",
      createTime: "",
      updateTime: "",
      tag: [],
    },
  ],
};

export default function reducer(
  state: State = initialState,
  action: todoActions
) {
  switch (action.type) {
    case Type.read:
      // return Object.assign({}, state, action.data);
      return {...state,data:action}
    default:
      return state;
  }
}

Reducer/index.tsx

import { combineReducers } from "redux";
import  reducer  from "./events";
import { getAction } from "../actions/index"

export type ReduxState = {
  reducer: getAction
}

export default combineReducers({ reducer });

Store/store.tsx

import { createStore, applyMiddleware } from "redux"
import reducer from "./reducer"
import thunk from "redux-thunk";
import { Action } from "redux";
import { todoActions } from "./actions";

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


export type ReduxAction = todoActions | Action

補足情報（FW/ツールのバージョンなど）

Github
参考資料

ここにより詳細な情報を記載してください。

Answer 1

あれから色々と変えてみて、なんとかdataの更新まで行けました。
お答えして頂いたA_kirisaki様、ありがとうございました。
https://github.com/ykobaya14/dcproject0001/tree/feature/newGetList

Answer 2

redux は connect したコンポーネントに state を埋め込みます。

  (state:getList) => ({ value: state.data }),

の部分ですね。そうするとコンポーネントクラスのメンバー state には data が入ってるはずです。その方が一致しないとまず言っています。それをしているのはどこかというと

class Task extends React.Component<getList,{}> {
                                        // ここ！

です。ここに data の型を入れればよい……のですがあいにく getList の宣言に埋もれてしまっていますので取り出してあげましょう（data 配列を丸々型にするのではなく、小分けにするのがおすすめです）（あと型やインターフェース、クラスの名前は大文字から始めたほうがよいのですが……とりあえずノータッチで）。

type Data =  {
    taskId: number;
    title: string;
    description: string;
    status: string;
    createTime: string;
    updateTime: string;
    tag?: string;
}

interface getList {
  data: Data[]
}

class Task extends React.Component<getList,Data[]> {

これで通るでしょう。Typescript + Redux は組み合わせたことはないのでだいぶ霊感で書いてますが、通らなかったらまた質問ください。

Comments

[like-here]

いつもありがとうございます！
今、回答して頂いた通りに修正をしてみたのですが、同じerror分が表示されました..
この場合は、classにはまた違う形で型の定義をしたほうが良いということなのでしょうか？

[A_kirisaki]

あっ、data って名前特殊だったかもしれない。直してみましょう。

[like-here]

名前変えてみたんですけど、変わらなかったのでactionとかreducerとの型の定義があって無いということでしょうか？
何度もすいません。。

[A_kirisaki]

いえ、こちらこそ一発で答え射抜けずすみません。GitHub のコードを拝見したいのですがプライベートリポジトリでしょうか。可能であればパブリックにしていただきたいのですが。

[like-here]

すいませんでした、上司の方が作ってくれたリポジトリだったので、自分の方にcloneしたのでこちらで試していただいてもよろしいでしょうか？お手数おかけしてしまって申し訳ございません！
https://github.com/hiroto-hash/todo-TypeScript/tree/newGetList