teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

型定義について追記

2020/12/22 07:19

投稿

A_kirisaki
A_kirisaki

スコア2853

answer CHANGED
@@ -9,4 +9,50 @@
9
9
  readEvents: readEvents(dispatch);
10
10
  }};
11
11
  ```
12
- が正しいです。また `readEvents` の使い方も `this.props.readEvents` になるのでご注意を。
12
+ が正しいです。また `readEvents` の使い方も `this.props.readEvents` になるのでご注意を。
13
+
14
+ ### 追記
15
+ 型定義は
16
+ ```TypeScript
17
+ // import { Dispatch } from 'redux'
18
+ export type Entity = {
19
+ taskId: number,
20
+ title: string,
21
+ description: string,
22
+ status: string,
23
+ createTime: string,
24
+ updateTime: string,
25
+ tag?: string[],
26
+ }
27
+
28
+ export type Entities = Entity[]
29
+
30
+ export type Action = {
31
+ type: string,
32
+ data: Entity,
33
+ }
34
+
35
+ export type Props = {
36
+ state: Entity,
37
+ dispatch: Dispatch,
38
+ }
39
+ ```
40
+ とすると丸く収まるでしょう。`interface` の使いどころがいまいちなので `type` にしてますが `interface` でも動くと思います。多分。すると `reducer` は
41
+ ```TypeScript
42
+ export default (events = initialState, action: Entities) => {
43
+ ...
44
+ ```
45
+ と書けるので `dispatch` は
46
+ ```TypeScript
47
+ // import { Dispatch } from 'redux'
48
+ export function readEvents(dispatch: Dispatch) {
49
+ dispatch({ type: "READ_EVENTS", entities });
50
+ }
51
+ ```
52
+ 型を付けて `entities` に変えときました。あと `async` 原因ちゃうん?ということで取っ払い。本格的に `dispatch` を書くなら
53
+ ```TypeScript
54
+ export functionAddEntity(dispatch: Dispatch){
55
+ return (entity: Entity) => {{ type: "ADD_ENTITY", entity }}
56
+ }
57
+ ```
58
+ みたいに関数を返すことになるでしょう。その時の `Action` 型定義は頑張ってください!