回答編集履歴
4
#
answer
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
**初期の質問文から最終的な質問内容にだいぶ変化し、質問もシンプルなものになっていたため、元の回答を削除し、現在の質問文をベースにした回答に変更 - 2018/03/27**
|
|
2
2
|
|
|
3
|
+
#1
|
|
3
4
|
```
|
|
4
5
|
class Hoge extends Component {
|
|
5
6
|
render() {
|
|
@@ -18,9 +19,9 @@
|
|
|
18
19
|
}
|
|
19
20
|
```
|
|
20
21
|
|
|
21
|
-
この場合であれば、Clickerコンポーネントをstoreに繋げるのではなく、Hogeコンポーネントをstoreに繋げて、Clickerが必要とするアクションやデータをpropsで渡してあげるのが一般的なやり方かと思います。
|
|
22
|
+
↑この場合であれば、Clickerコンポーネントをstoreに繋げるのではなく、Hogeコンポーネントをstoreに繋げて、Clickerが必要とするアクションやデータをpropsで渡してあげるのが一般的なやり方かと思います。
|
|
22
23
|
|
|
23
|
-
|
|
24
|
+
#2
|
|
24
25
|
```
|
|
25
26
|
// reducers/clicker.js
|
|
26
27
|
const initialState = {value:0}
|
|
@@ -35,6 +36,7 @@
|
|
|
35
36
|
```
|
|
36
37
|
Hogeコンポーネントでは、storeから参照できる上記のような配列をmap overしてclickerコンポーネントをレンダー。
|
|
37
38
|
|
|
39
|
+
#3
|
|
38
40
|
```
|
|
39
41
|
// actions/clicker.js
|
|
40
42
|
function clickerClick() {
|
3
変更
answer
CHANGED
|
@@ -1,13 +1,53 @@
|
|
|
1
|
-
|
|
1
|
+
**初期の質問文から最終的な質問内容にだいぶ変化し、質問もシンプルなものになっていたため、元の回答を削除し、現在の質問文をベースにした回答に変更 - 2018/03/27**
|
|
2
2
|
|
|
3
|
+
```
|
|
4
|
+
class Hoge extends Component {
|
|
5
|
+
render() {
|
|
6
|
+
return (
|
|
7
|
+
<div>
|
|
8
|
+
<div>
|
|
3
|
-
>
|
|
9
|
+
<h1>Clicker 1</h1>
|
|
10
|
+
<Clicker/>
|
|
11
|
+
</div>
|
|
12
|
+
<div>
|
|
13
|
+
<h1>Clicker 2</h1>
|
|
14
|
+
<Clicker/>
|
|
15
|
+
</div>
|
|
16
|
+
<div>;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
```
|
|
4
20
|
|
|
5
|
-
|
|
21
|
+
この場合であれば、Clickerコンポーネントをstoreに繋げるのではなく、Hogeコンポーネントをstoreに繋げて、Clickerが必要とするアクションやデータをpropsで渡してあげるのが一般的なやり方かと思います。
|
|
6
22
|
|
|
7
|
-
> そもそもreducerがhogeという共通のものを使ってしまう以上、store内に保存されるデータを別々にすることは出来ないのでしょうか？
|
|
8
23
|
|
|
24
|
+
```
|
|
25
|
+
// reducers/clicker.js
|
|
26
|
+
const initialState = {value:0}
|
|
27
|
+
```
|
|
28
|
+
↓
|
|
29
|
+
```
|
|
30
|
+
// reducers/clicker.js
|
|
31
|
+
const initialState = [
|
|
32
|
+
{ id:1, value:0 },
|
|
33
|
+
{ id:2, value:0 }
|
|
34
|
+
];
|
|
35
|
+
```
|
|
9
|
-
|
|
36
|
+
Hogeコンポーネントでは、storeから参照できる上記のような配列をmap overしてclickerコンポーネントをレンダー。
|
|
10
37
|
|
|
38
|
+
```
|
|
39
|
+
// actions/clicker.js
|
|
40
|
+
function clickerClick() {
|
|
41
|
+
return {type:'clicker.click'};
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
↓
|
|
45
|
+
```
|
|
46
|
+
function clickerClick(id) {
|
|
47
|
+
return {
|
|
48
|
+
type:'clicker.click',
|
|
49
|
+
payload: id
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
```
|
|
11
|
-
|
|
53
|
+
action creatorの引数でclickerのidを渡せるようにして、reducerがどのclicker idのデータかを判別できるようにし、クリックされたidのカウントをreducerでインクリメントして、新しいstateを返す。
|
|
12
|
-
|
|
13
|
-
たぶん、この説明だと意味不明だと思いますが、命名が抽象的な状態で回答すると、こうならざるを得ません。。。
|
2
修正
answer
CHANGED
|
@@ -8,6 +8,6 @@
|
|
|
8
8
|
|
|
9
9
|
state.hogeがオブジェクトで、state.hoge.aaa、state.hoge.bbbのようになっていれば、Hoge1の変更はhoge.aaaに反映させて、Hoge2の変更はhoge.bbbに反映させるという風にすれば良いのではないでしょうか。
|
|
10
10
|
|
|
11
|
-
それか、reducerの中で、hogeとmainが今ありますが、Hoge1の変更はhogeに、Hoge2の変更はmainに反映させるようにするとか。
|
|
11
|
+
~~それか、reducerの中で、hogeとmainが今ありますが、Hoge1の変更はhogeに、Hoge2の変更はmainに反映させるようにするとか。~~ (質問文修正後、この一文は不適切なものになった為、打ち消し)
|
|
12
12
|
|
|
13
13
|
たぶん、この説明だと意味不明だと思いますが、命名が抽象的な状態で回答すると、こうならざるを得ません。。。
|
1
誤字
answer
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> Aの中のHogeをHoge1、Bの中のHogeをHoge2としたとき、Hoge1、Hoge2で独立したデータを持てるようにしたいです。Hoge1で発生したactionはHoge1にのみ影響を与えるようにしたいです。いまのままだとHoge1が書き換わるとHoge2も同時に書き換わってしまいます。
|
|
4
4
|
|
|
5
|
-
はい、共通のstate.hogeをそれぞれのコンポーネントが参照しているの
|
|
5
|
+
はい、共通のstate.hogeをそれぞれのコンポーネントが参照しているので、そういうものです。
|
|
6
6
|
|
|
7
7
|
> そもそもreducerがhogeという共通のものを使ってしまう以上、store内に保存されるデータを別々にすることは出来ないのでしょうか？
|
|
8
8
|
|