回答編集履歴
4
テキスト修正
test
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
|
|
41
|
-
`connect`
|
|
41
|
+
`connect`による効果によって `dispatch`が props に渡されることは、以下のようにすれば確かめられます。
|
|
42
42
|
|
|
43
43
|
```javascript
|
|
44
44
|
|
3
テキスト修正
test
CHANGED
|
@@ -191,3 +191,49 @@
|
|
|
191
191
|
|
|
192
192
|
|
|
193
193
|
以上、参考になれば幸いです。
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
### 追記
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
> もし仮にmapStateToPropsを”与える”やり方で書いた場合においても、dispatchはpropsに渡されますか？
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
渡されます。
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
仮に redux state に、システムからのお知らせとして、 messages というプロパティがあるとします。これを `ExpenseListItem` で使いたいとき、 `mapStateToProps` を
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
```javascript
|
|
214
|
+
|
|
215
|
+
const mapStateToProps = state => ({
|
|
216
|
+
|
|
217
|
+
messages: state.messages
|
|
218
|
+
|
|
219
|
+
});
|
|
220
|
+
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
としておいて、connect を
|
|
226
|
+
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
```javascript
|
|
232
|
+
|
|
233
|
+
export default connect(mapStateToProps)(ExpenseListItem);
|
|
234
|
+
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
と、`mapStateToProps` は指定するけれども `mapDispatchToProps` は指定しない書き方をすると、connect によってprops に渡されるのは `messages` と `dispatch` の２点ということになります。
|
2
テキスト修正
test
CHANGED
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
|
|
169
169
|
|
|
170
170
|
|
|
171
|
-
`withRouter`の働きは、`A`というコンポーネントがあったときに、`withRouter(A)` が返すコンポーネントを適切にルーティング設定すると、`A`には、`match`, `location`, `history` の３点がprops経由で渡されますので、これらを使ってURLや画面遷移の操作等を実現できます。
|
|
171
|
+
`withRouter`の働きは、`A`というコンポーネントがあったときに、`withRouter(A)` が返すコンポーネントを適切にルーティング設定すると、`A`には、`match`, `location`, `history` の３点がprops経由で渡されますので、これらを使ってURLや画面遷移の操作等を実現できます。（ただしこれら3つのpropsは関数ではありません。`connect()`が返すHOC以外にも、Reactによる開発でよく使う HOCの事例として `withRouter` を挙げました。）
|
|
172
172
|
|
|
173
173
|
|
|
174
174
|
|
1
テキスト修正
test
CHANGED
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
|
|
85
85
|
const mapDispatchToProps = dispatch => ({
|
|
86
86
|
|
|
87
|
-
|
|
87
|
+
remove: id => { dispatch(removeExpense({id})); }
|
|
88
88
|
|
|
89
89
|
});
|
|
90
90
|
|
|
@@ -94,7 +94,9 @@
|
|
|
94
94
|
|
|
95
95
|
```
|
|
96
96
|
|
|
97
|
-
とすると、
|
|
97
|
+
とすると、上記の `remove` が props 経由で渡されるので、`ExpenseListItem` は以下のようになります。
|
|
98
|
+
|
|
99
|
+
|
|
98
100
|
|
|
99
101
|
```jsx
|
|
100
102
|
|
|
@@ -106,7 +108,7 @@
|
|
|
106
108
|
|
|
107
109
|
|
|
108
110
|
|
|
109
|
-
const ExpenseListItem = ({
|
|
111
|
+
const ExpenseListItem = ({ remove, id, description, amount, createdAt }) => (
|
|
110
112
|
|
|
111
113
|
<div>
|
|
112
114
|
|
|
@@ -116,7 +118,7 @@
|
|
|
116
118
|
|
|
117
119
|
<button onClick={() => {
|
|
118
120
|
|
|
119
|
-
|
|
121
|
+
remove(id)
|
|
120
122
|
|
|
121
123
|
}}>
|
|
122
124
|
|
|
@@ -132,7 +134,7 @@
|
|
|
132
134
|
|
|
133
135
|
```
|
|
134
136
|
|
|
135
|
-
|
|
137
|
+
|
|
136
138
|
|
|
137
139
|
|
|
138
140
|
|