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

編集履歴

質問編集履歴

6

参考URL追加。

2018/03/23 06:33

投稿

masaya_ohashi
masaya_ohashi

スコア9206

test CHANGED
File without changes
test CHANGED
@@ -172,6 +172,16 @@
172
172
 
173
173
 
174
174
 
175
+ 【追記】
176
+
177
+ この方も同じような悩みを抱えているようです。しかしスマートな解決法は見つかっていないようです…
178
+
179
+ [https://qiita.com/derui@github/items/8272c5cb7eb7fc3ecd67](https://qiita.com/derui@github/items/8272c5cb7eb7fc3ecd67)
180
+
181
+
182
+
183
+
184
+
175
185
  ### 補足情報（FW/ツールのバージョンなど）
176
186
 
177
187
  package.json一部抜粋

5

実際に使うようなシーンを想定したクラスに変更。

2018/03/23 06:33

投稿

masaya_ohashi
masaya_ohashi

スコア9206

test CHANGED
File without changes
test CHANGED
@@ -2,13 +2,15 @@
2
2
 
3
3
 
4
4
 
5
- 例えばhogeという名前のReducerと紐付いているHogeというComponentがあるとします。このHogeというComponentを、AとBというComponent両方で使う場合、storeの中にはhogeという名前のものが1つしかないのですが、A、B両方で独立した状態で管理するにはどのように書くのが一般的なのでしょうか？そもそもこのように小型のComponentの内部情報をReduxで管理するのが間違いなのでしょうか？
5
+ 例えばclickerという名前のReducerと、store上のclickerのデータを参照するClickerというComponentがあるとします。
6
+
7
+ このClickerというComponentを複数箇所で使う場合、storeの中にはclickerという名前のものが1つしかないのですが、それぞれの使用箇所で独立した状態で管理するにはどのように書くのが一般的なのでしょうか？そもそもこのように汎用的なComponentの内部情報をReduxで管理するのが間違いなのでしょうか？
6
8
 
7
9
 
8
10
 
9
11
  ### 発生している問題・エラーメッセージ
10
12
 
11
- AとB別々のデータをstoreで扱いたいが、共通になってしまう。
13
+ 別々のデータをstoreで扱いたいが、共通になってしまう。
12
14
 
13
15
 
14
16
 
@@ -16,41 +18,37 @@
16
18
 
17
19
 
18
20
 
19
- 例として、Clickするたびにカウントが1増える<Hoge>というComponentを作ります。
20
-
21
-
22
-
23
21
  ```JavaScript
24
22
 
25
- // actions/hoge.js
23
+ // actions/clicker.js
26
24
 
27
- function hogeClick() {
25
+ function clickerClick() {
28
26
 
29
- return {type:'hoge.click'};
27
+ return {type:'clicker.click'};
30
28
 
31
29
  }
32
30
 
33
- const HogeActions = {
31
+ const ClickerActions = {
34
32
 
35
- hogeClick
33
+ clickerClick
36
34
 
37
35
  };
38
36
 
39
- export default HogeActions;
37
+ export default ClickerActions;
40
38
 
41
39
  ```
42
40
 
43
41
  ```JavaScript
44
42
 
45
- // reducers/hoge.js
43
+ // reducers/clicker.js
46
44
 
47
45
  const initialState = {value:0}
48
46
 
49
- function hoge(state=initialState, action) {
47
+ function clicker(state=initialState, action) {
50
48
 
51
49
  switch(action.type) {
52
50
 
53
- case 'hoge.click':
51
+ case 'clicker.click':
54
52
 
55
53
  let ret = Object.assign({}, state);
56
54
 
@@ -74,7 +72,7 @@
74
72
 
75
73
  main,
76
74
 
77
- hoge, // ←reducers/hoge.js
75
+ clicker, // ←reducers/clicker.js
78
76
 
79
77
  });
80
78
 
@@ -88,13 +86,13 @@
88
86
 
89
87
  ```JavaScript
90
88
 
91
- // components/Hoge.js
89
+ // components/Clicker.js
92
90
 
93
- class Hoge extends Component {
91
+ class Clicker extends Component {
94
92
 
95
93
  render() {
96
94
 
97
- return <div onClick={e=>this.props.actions.hogeClick()}>{this.props.hoge.value}</div>;
95
+ return <div onClick={e=>this.props.actions.clickerClick()}>{this.props.clicker.value}</div>;
98
96
 
99
97
  }
100
98
 
@@ -102,7 +100,7 @@
102
100
 
103
101
  function mapStateToProps(state) {
104
102
 
105
- return {hoge:state.hoge};
103
+ return {clicker:state.clicker};
106
104
 
107
105
  }
108
106
 
@@ -110,7 +108,7 @@
110
108
 
111
109
  return {
112
110
 
113
- actions: bindActionCreators(Object.assign({}, HogeActions), dispatch)
111
+ actions: bindActionCreators(Object.assign({}, ClickerActions), dispatch)
114
112
 
115
113
  };
116
114
 
@@ -118,23 +116,43 @@
118
116
 
119
117
 
120
118
 
121
- export default connect(mapStateToProps)(Hoge);
119
+ export default connect(mapStateToProps, mapDispatchToProps)(Clicker);
122
120
 
123
121
  ```
124
122
 
125
123
 
126
124
 
127
- この状態で<Hoge>を複数箇所に使用したとき、storeにはhogeという入れ物は1つしかないので相互に影響してしまうため、独立したデータで持ちたい。
125
+ この状態で<Clicker>を複数箇所に使用したとき、storeにはclickerという入れ物は1つしかないので相互に影響してしまうため、独立したデータで持ちたい。
128
126
 
129
127
 
130
128
 
131
129
  ```JavaScript
132
130
 
133
- class A extends Component {
131
+ class Hoge extends Component {
134
132
 
135
133
  render() {
136
134
 
135
+ return (
136
+
137
+ <div>
138
+
139
+ <div>
140
+
141
+ <h1>Clicker 1</h1>
142
+
143
+ <Clicker/>
144
+
145
+ </div>
146
+
147
+ <div>
148
+
137
- return <div><Hoge/><div>;
149
+ <h1>Clicker 2</h1>
150
+
151
+ <Clicker/>
152
+
153
+ </div>
154
+
155
+ <div>;
138
156
 
139
157
  }
140
158
 
@@ -142,21 +160,7 @@
142
160
 
143
161
  ```
144
162
 
145
- ```JavaScript
146
-
147
- class B extends Component {
148
-
149
- render() {
150
-
151
- return <div><Hoge/><div>;
152
-
153
- }
154
-
155
- }
156
-
157
- ```
158
-
159
- Aの中のHogeをHoge1、Bの中のHogeをHoge2としたとき、Hoge1、Hoge2で独立したデータを持てるようにしたいです。Hoge1で発生したactionはHoge1にのみ影響を与えるようにしたいです。いまのままだとHoge1が書き換わるとHoge2も同時に書き換わってしまいます。そもそもreducerがhogeという共通のものを使ってしまう以上、store内に保存されるデータを別々にすることは出来ないのでしょうか？
163
+ このように複数箇所で使用した場合、Clicker 1とClicker 2で独立したデータを持てるようにしたいです。Clicker 1で発生したactionはClicker 1にのみ影響を与えるようにしたいです。いまのままだとClicker 1が書き換わるとClicker 2も同時に書き換わってしまいます。そもそもreducerがclickerという共通のものを使ってしまう以上、store内に保存されるデータを別々にすることは出来ないのでしょうか？
160
164
 
161
165
 
162
166
 

4

修正。

2018/03/23 06:22

投稿

masaya_ohashi
masaya_ohashi

スコア9206

test CHANGED
File without changes
test CHANGED
@@ -16,23 +16,27 @@
16
16
 
17
17
 
18
18
 
19
+ 例として、Clickするたびにカウントが1増える<Hoge>というComponentを作ります。
20
+
21
+
22
+
19
23
  ```JavaScript
20
24
 
21
- // components/Hoge.js
25
+ // actions/hoge.js
22
26
 
23
- class Hoge extends Component {
27
+ function hogeClick() {
24
28
 
25
- // 省略
29
+ return {type:'hoge.click'};
26
30
 
27
31
  }
28
32
 
29
- function mapStateToProps(state) {
33
+ const HogeActions = {
30
34
 
31
- return state;
35
+ hogeClick
32
36
 
33
- }
37
+ };
34
38
 
35
- export default connect(mapStateToProps)(Hoge);
39
+ export default HogeActions;
36
40
 
37
41
  ```
38
42
 
@@ -40,9 +44,23 @@
40
44
 
41
45
  // reducers/hoge.js
42
46
 
43
- function hoge() {
47
+ const initialState = {value:0}
44
48
 
49
+ function hoge(state=initialState, action) {
50
+
51
+ switch(action.type) {
52
+
45
- // 省略
53
+ case 'hoge.click':
54
+
55
+ let ret = Object.assign({}, state);
56
+
57
+ ret.value++;
58
+
59
+ return ret;
60
+
61
+ }
62
+
63
+ return state;
46
64
 
47
65
  }
48
66
 
@@ -63,6 +81,44 @@
63
81
 
64
82
 
65
83
  export default mainApp;
84
+
85
+ ```
86
+
87
+
88
+
89
+ ```JavaScript
90
+
91
+ // components/Hoge.js
92
+
93
+ class Hoge extends Component {
94
+
95
+ render() {
96
+
97
+ return <div onClick={e=>this.props.actions.hogeClick()}>{this.props.hoge.value}</div>;
98
+
99
+ }
100
+
101
+ }
102
+
103
+ function mapStateToProps(state) {
104
+
105
+ return {hoge:state.hoge};
106
+
107
+ }
108
+
109
+ function mapDispatchToProps(dispatch) {
110
+
111
+ return {
112
+
113
+ actions: bindActionCreators(Object.assign({}, HogeActions), dispatch)
114
+
115
+ };
116
+
117
+ }
118
+
119
+
120
+
121
+ export default connect(mapStateToProps)(Hoge);
66
122
 
67
123
  ```
68
124
 

3

追記修正。

2018/03/23 06:14

投稿

masaya_ohashi
masaya_ohashi

スコア9206

test CHANGED
File without changes
test CHANGED
@@ -100,7 +100,7 @@
100
100
 
101
101
  ```
102
102
 
103
- AとBの中でそれぞれ<Hoge>を使用した際、A側のHogeがなんらかの契機でactionを発行すると、B側も同じstoreを参照しているため書き換わってしまうのをどうにかしたいです。
103
+ Aの中のHogeをHoge1、Bの中のHogeをHoge2としたとき、Hoge1、Hoge2で独立したデータを持てるようにしたいです。Hoge1で発生したactionはHoge1にのみ影響を与えるようにしたいです。いまのままだとHoge1が書き換わるとHoge2も同時に書き換わってしまいます。そもそもreducerがhogeという共通のものを使ってしまう以上、store内に保存されるデータを別々にすることは出来ないのでしょうか？
104
104
 
105
105
 
106
106
 

2

追記

2018/03/23 06:02

投稿

masaya_ohashi
masaya_ohashi

スコア9206

test CHANGED
File without changes
test CHANGED
@@ -72,6 +72,38 @@
72
72
 
73
73
 
74
74
 
75
+ ```JavaScript
76
+
77
+ class A extends Component {
78
+
79
+ render() {
80
+
81
+ return <div><Hoge/><div>;
82
+
83
+ }
84
+
85
+ }
86
+
87
+ ```
88
+
89
+ ```JavaScript
90
+
91
+ class B extends Component {
92
+
93
+ render() {
94
+
95
+ return <div><Hoge/><div>;
96
+
97
+ }
98
+
99
+ }
100
+
101
+ ```
102
+
103
+ AとBの中でそれぞれ<Hoge>を使用した際、A側のHogeがなんらかの契機でactionを発行すると、B側も同じstoreを参照しているため書き換わってしまうのをどうにかしたいです。
104
+
105
+
106
+
75
107
  ### 試したこと
76
108
 
77
109
 

1

reducersのfunction名が誤っていたため修正。

2018/03/23 05:58

投稿

masaya_ohashi
masaya_ohashi

スコア9206

test CHANGED
File without changes
test CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
  // reducers/hoge.js
42
42
 
43
- function proc() {
43
+ function hoge() {
44
44
 
45
45
  // 省略
46
46