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

回答編集履歴

9

テキスト追加

2020/04/23 21:54

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -51,7 +51,7 @@
51
51
 
52
52
  ### 追記2
53
53
 
54
- action.payload 自体が、value だったりインデクスだったりしてもよいのですが、payloadをオブジェクトにして、その中に値をプロパティとして持つ形もよく使われます。
54
+ アクションオブジェクトの構造について、action.payload 自体が、value だったりインデクスだったりしてもよいのですが、上記の回答のとおり、payloadをオブジェクトにして、その中に値をプロパティとして持つ形もよく使われます。以下のような形です。
55
55
 
56
56
  ```javascript
57
57
  {
@@ -61,4 +61,4 @@
61
61
  }
62
62
  }
63
63
  ```
64
- 参考: [https://github.com/redux-utilities/flux-standard-action#example](https://github.com/redux-utilities/flux-standard-action#example)
64
+ 引用元: [https://github.com/redux-utilities/flux-standard-action#example](https://github.com/redux-utilities/flux-standard-action#example)

8

テキスト追加

2020/04/23 21:54

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -55,9 +55,9 @@
55
55
 
56
56
  ```javascript
57
57
  {
58
- type: "ADD_TODO",
58
+ type: 'ADD_TODO',
59
59
  payload: {
60
- value: "何かの仕事"
60
+ text: 'Do something.'
61
61
  }
62
62
  }
63
63
  ```

7

テキスト追加

2020/04/23 14:06

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -47,4 +47,18 @@
47
47
  は、三項演算子を使わずに、以下のようにも書けて、少し短くできます。
48
48
  ```javascript
49
49
  flag: action.payload.id !== todo.id && todo.flag
50
- ```
50
+ ```
51
+
52
+ ### 追記2
53
+
54
+ action.payload 自体が、value だったりインデクスだったりしてもよいのですが、payloadをオブジェクトにして、その中に値をプロパティとして持つ形もよく使われます。
55
+
56
+ ```javascript
57
+ {
58
+ type: "ADD_TODO",
59
+ payload: {
60
+ value: "何かの仕事"
61
+ }
62
+ }
63
+ ```
64
+ 参考: [https://github.com/redux-utilities/flux-standard-action#example](https://github.com/redux-utilities/flux-standard-action#example)

6

テキスト追加

2020/04/23 14:04

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -37,4 +37,14 @@
37
37
  }));
38
38
  return { ...state, todos };
39
39
  },
40
+ ```
41
+
42
+ ### 追記
43
+
44
+ ```javascript
45
+ flag: action.payload.id === todo.id ? false : todo.flag
46
+ ```
47
+ は、三項演算子を使わずに、以下のようにも書けて、少し短くできます。
48
+ ```javascript
49
+ flag: action.payload.id !== todo.id && todo.flag
40
50
  ```

5

テキスト追加

2020/04/23 13:53

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,6 +1,6 @@
1
1
  こんにちは
2
2
 
3
- 配列のインデクスで特定する場合は、以下でよいかと思います。
3
+ 配列のインデクス(`action.payload.index`とします。)で特定する場合は、以下でよいかと思います。
4
4
 
5
5
  ```javascript
6
6
  [Actions.completedTodo]: (state, action) => ({

4

テキスト追加

2020/04/23 13:33

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -13,7 +13,7 @@
13
13
  - 動作確認用サンプル: [https://codepen.io/jun68ykt/pen/VwvPdwJ?editors=0012](https://codepen.io/jun68ykt/pen/VwvPdwJ?editors=0012)
14
14
 
15
15
 
16
- todos の要素にユニークなプロパティ `id` を追加するのであれば、以下です。
16
+ todos の要素にユニークなプロパティ `id` を追加して、これによって要素を指定するのであれば、以下です。
17
17
 
18
18
  ```javascript
19
19
  [Actions.completedTodo]: (state, action) => ({
@@ -27,7 +27,7 @@
27
27
  - 動作確認用サンプル: [https://codepen.io/jun68ykt/pen/PoPWejr?editors=0012](https://codepen.io/jun68ykt/pen/PoPWejr?editors=0012)
28
28
 
29
29
 
30
- または一行で書くと長くて読みにくければ、 `(state, action) =>` の後を、`return` を書く形にして、以下す。
30
+ 一行で書くと長くなって読みにくくなるので、 `(state, action) =>` の後を、`return` を書く形にすれば、以下のようにも書けます。
31
31
 
32
32
  ```javascript
33
33
  [Actions.completedTodo]: (state, action) => {

3

テキスト追加

2020/04/23 13:29

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,10 +1,23 @@
1
1
  こんにちは
2
2
 
3
- todos 要素にユニーなプロパティ `id` を追加したとして、以下でよいかと思います。
3
+ 配列インデスで特定する場合は、以下でよいかと思います。
4
4
 
5
5
  ```javascript
6
6
  [Actions.completedTodo]: (state, action) => ({
7
7
  ...state,
8
+ todos: state.todos.map((todo, i) => ({ ...todo, flag: i === action.payload.index ? false : todo.flag }))
9
+ }),
10
+ ```
11
+ 以下は上記のコードを試すためのサンプルです。
12
+
13
+ - 動作確認用サンプル: [https://codepen.io/jun68ykt/pen/VwvPdwJ?editors=0012](https://codepen.io/jun68ykt/pen/VwvPdwJ?editors=0012)
14
+
15
+
16
+ todos の要素にユニークなプロパティ `id` を追加するのであれば、以下です。
17
+
18
+ ```javascript
19
+ [Actions.completedTodo]: (state, action) => ({
20
+ ...state,
8
21
  todos: state.todos.map(todo => ({ ...todo, flag: action.payload.id === todo.id ? false : todo.flag }))
9
22
  }),
10
23
  ```

2

テキスト追加

2020/04/23 13:17

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -5,7 +5,7 @@
5
5
  ```javascript
6
6
  [Actions.completedTodo]: (state, action) => ({
7
7
  ...state,
8
- todos: state.todos.map(todo => ({ ...todo, flag: action.id === todo.id ? false : todo.flag }))
8
+ todos: state.todos.map(todo => ({ ...todo, flag: action.payload.id === todo.id ? false : todo.flag }))
9
9
  }),
10
10
  ```
11
11
 
@@ -20,7 +20,7 @@
20
20
  [Actions.completedTodo]: (state, action) => {
21
21
  const todos = state.todos.map(todo => ({
22
22
  ...todo,
23
- flag: action.id === todo.id ? false : todo.flag
23
+ flag: action.payload.id === todo.id ? false : todo.flag
24
24
  }));
25
25
  return { ...state, todos };
26
26
  },

1

テキスト追加

2020/04/23 13:11

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -14,7 +14,7 @@
14
14
  - 動作確認用サンプル: [https://codepen.io/jun68ykt/pen/PoPWejr?editors=0012](https://codepen.io/jun68ykt/pen/PoPWejr?editors=0012)
15
15
 
16
16
 
17
- または一行で書くと長くて読みにくければ、 `=>` の後を、`return` を書く形にして、以下です。
17
+ または一行で書くと長くて読みにくければ、 `(state, action) =>` の後を、`return` を書く形にして、以下です。
18
18
 
19
19
  ```javascript
20
20
  [Actions.completedTodo]: (state, action) => {