teratail
回答率
85.48%
質問するログイン新規登録
トップReduxに関する質問React+Reduxで、Reduxと紐付いたComponentを複数箇所で使う場合の書き方がわからない

編集履歴

回答編集履歴

4

#

2018/03/27 05:22

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -1,6 +1,8 @@
1
1
  **初期の質問文から最終的な質問内容にだいぶ変化し、質問もシンプルなものになっていたため、元の回答を削除し、現在の質問文をベースにした回答に変更 - 2018/03/27**
2
2
 
3
3
 
4
+
5
+ #1
4
6
 
5
7
  ```
6
8
 
@@ -38,11 +40,11 @@
38
40
 
39
41
 
40
42
 
41
- この場合であれば、Clickerコンポーネントをstoreに繋げるのではなく、Hogeコンポーネントをstoreに繋げて、Clickerが必要とするアクションやデータをpropsで渡してあげるのが一般的なやり方かと思います。
43
+ ↑この場合であれば、Clickerコンポーネントをstoreに繋げるのではなく、Hogeコンポーネントをstoreに繋げて、Clickerが必要とするアクションやデータをpropsで渡してあげるのが一般的なやり方かと思います。
42
44
 
43
45
 
44
46
 
45
-
47
+ #2
46
48
 
47
49
  ```
48
50
 
@@ -71,6 +73,8 @@
71
73
  Hogeコンポーネントでは、storeから参照できる上記のような配列をmap overしてclickerコンポーネントをレンダー。
72
74
 
73
75
 
76
+
77
+ #3
74
78
 
75
79
  ```
76
80
 

3

変更

2018/03/27 05:22

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -1,25 +1,105 @@
1
- まず、最初にHogeやA、Bなどの抽象的な命名ではなく、実際に使われるようなシーンを何か適当に仮で想定して頂いた上で命名し直した上での質問に修正された方が、より適切な回答が出来るかと思います。
1
+ **初期の質問文から最終的な質問内容にだいぶ変化し、質問もシンプルなものになっていたため、元の回答を削除し、現在の質問文をベースにした回答に変更 - 2018/03/27**
2
2
 
3
3
 
4
4
 
5
+ ```
6
+
7
+ class Hoge extends Component {
8
+
9
+ render() {
10
+
11
+ return (
12
+
13
+ <div>
14
+
15
+ <div>
16
+
5
- > Aの中のHogeをHoge1、Bの中のHogeをHoge2としたとき、Hoge1、Hoge2で独立したデータを持てるようにしたいです。Hoge1で発生したactionはHoge1にのみ影響を与えるようにしたいです。いまのままだとHoge1が書き換わるとHoge2も同時に書き換わってしまいます。
17
+ <h1>Clicker 1</h1>
18
+
19
+ <Clicker/>
20
+
21
+ </div>
22
+
23
+ <div>
24
+
25
+ <h1>Clicker 2</h1>
26
+
27
+ <Clicker/>
28
+
29
+ </div>
30
+
31
+ <div>;
32
+
33
+ }
34
+
35
+ }
36
+
37
+ ```
6
38
 
7
39
 
8
40
 
9
- はい、共通のstate.hogeをそれぞれのコンポーネントが参照しているので、そういうものです。
41
+ この場合であれば、Clickerコンポーネントをstoreに繋げるのではなく、Hogeコンポーネントをstoreに繋げて、Clickerが必要とするアクションやデータをpropsで渡してあげるのが一般的なやり方かと思います。
10
42
 
11
43
 
12
44
 
45
+
46
+
47
+ ```
48
+
49
+ // reducers/clicker.js
50
+
51
+ const initialState = {value:0}
52
+
53
+ ```
54
+
55
+ ↓
56
+
57
+ ```
58
+
59
+ // reducers/clicker.js
60
+
61
+ const initialState = [
62
+
63
+ { id:1, value:0 },
64
+
65
+ { id:2, value:0 }
66
+
67
+ ];
68
+
69
+ ```
70
+
13
- > そもそもreducerがhogeという共通のものを使ってしまう以上、store内に保存されるデータを別々にすることは出来ないのでしょうか？
71
+ Hogeコンポーネントでは、storeから参照できる上記のような配列をmap overしてclickerコンポーネントをレンダー。
14
72
 
15
73
 
16
74
 
17
- state.hogeがオブジェクトで、state.hoge.aaa、state.hoge.bbbのようになっていれば、Hoge1の変更はhoge.aaaに反映させて、Hoge2の変更はhoge.bbbに反映させるという風にすれば良いのではないでしょうか。
75
+ ```
18
76
 
77
+ // actions/clicker.js
19
78
 
79
+ function clickerClick() {
20
80
 
21
- ~~それか、reducerの中で、hogeとmainが今ありますが、Hoge1の変更はhogeに、Hoge2の変更はmainに反映させるようにするとか。~~ (質問文修正後、この一文は不適切なものになった為、打ち消し)
81
+ return {type:'clicker.click'};
22
82
 
83
+ }
23
84
 
85
+ ```
24
86
 
87
+ ↓
88
+
89
+ ```
90
+
91
+ function clickerClick(id) {
92
+
93
+ return {
94
+
25
- たぶん、この説明だと意味不明だと思いますが、命名が抽象的な状態で回答すると、こうならざるを得ません。。。
95
+ type:'clicker.click',
96
+
97
+ payload: id
98
+
99
+ };
100
+
101
+ }
102
+
103
+ ```
104
+
105
+ action creatorの引数でclickerのidを渡せるようにして、reducerがどのclicker idのデータかを判別できるようにし、クリックされたidのカウントをreducerでインクリメントして、新しいstateを返す。

2

修正

2018/03/27 05:20

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
- それか、reducerの中で、hogeとmainが今ありますが、Hoge1の変更はhogeに、Hoge2の変更はmainに反映させるようにするとか。
21
+ ~~それか、reducerの中で、hogeとmainが今ありますが、Hoge1の変更はhogeに、Hoge2の変更はmainに反映させるようにするとか。~~ (質問文修正後、この一文は不適切なものになった為、打ち消し)
22
22
 
23
23
 
24
24
 

1

誤字

2018/03/27 04:58

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- はい、共通のstate.hogeをそれぞれのコンポーネントが参照しているのは、そういうものです。
9
+ はい、共通のstate.hogeをそれぞれのコンポーネントが参照しているので、そういうものです。
10
10
 
11
11
 
12
12