質問編集履歴

参考URL追加。

2018/03/23 06:33

投稿

masaya_ohashi

スコア9210

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -85,6 +85,11 @@
 いろいろ調べようとしているのですが、どういう用語で調べたものかわからず、なかなか情報に行き当たりません…
+【追記】
+この方も同じような悩みを抱えているようです。しかしスマートな解決法は見つかっていないようです…
+[https://qiita.com/derui@github/items/8272c5cb7eb7fc3ecd67](https://qiita.com/derui@github/items/8272c5cb7eb7fc3ecd67)
 ### 補足情報（FW/ツールのバージョンなど）
 package.json一部抜粋
 ```

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

2018/03/23 06:33

投稿

masaya_ohashi

スコア9210

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -1,30 +1,29 @@
 ### 前提・実現したいこと
-例えばhogeという名前のReducerと紐付いているHogeというComponentがあるとします。このHogeというComponentを、AとBというComponent両方で使う場合、storeの中にはhogeという名前のものが1つしかないのですが、A、B両方で独立した状態で管理するにはどのように書くのが一般的なのでしょうか？そもそもこのように小型のComponentの内部情報をReduxで管理するのが間違いなのでしょうか？
+例えばclickerという名前のReducerと、store上のclickerのデータを参照するClickerというComponentがあるとします。
+このClickerというComponentを複数箇所で使う場合、storeの中にはclickerという名前のものが1つしかないのですが、それぞれの使用箇所で独立した状態で管理するにはどのように書くのが一般的なのでしょうか？そもそもこのように汎用的なComponentの内部情報をReduxで管理するのが間違いなのでしょうか？
 ### 発生している問題・エラーメッセージ
-AとB別々のデータをstoreで扱いたいが、共通になってしまう。
+別々のデータをstoreで扱いたいが、共通になってしまう。
 ### 該当のソースコード
-例として、Clickするたびにカウントが1増える<Hoge>というComponentを作ります。
 ```JavaScript
-// actions/hoge.js
+// actions/clicker.js
-function hogeClick() {
+function clickerClick() {
-  return {type:'hoge.click'};
+  return {type:'clicker.click'};
 }
-const HogeActions = {
+const ClickerActions = {
-  hogeClick
+  clickerClick
 };
-export default HogeActions;
+export default ClickerActions;
 ```
 ```JavaScript
-// reducers/hoge.js
+// reducers/clicker.js
 const initialState = {value:0}
-function hoge(state=initialState, action) {
+function clicker(state=initialState, action) {
   switch(action.type) {
-    case 'hoge.click':
+    case 'clicker.click':
       let ret = Object.assign({}, state);
       ret.value++;
       return ret;
@@ -36,48 +35,51 @@
 // reducers/main.js
 const mainApp = combineReducers({
     main,
-    hoge, // ←reducers/hoge.js
+    clicker, // ←reducers/clicker.js
 });
 export default mainApp;
 ```
 ```JavaScript
-// components/Hoge.js
+// components/Clicker.js
-class Hoge extends Component {
+class Clicker extends Component {
   render() {
-    return <div onClick={e=>this.props.actions.hogeClick()}>{this.props.hoge.value}</div>;
+    return <div onClick={e=>this.props.actions.clickerClick()}>{this.props.clicker.value}</div>;
   }
 }
 function mapStateToProps(state) {
-  return {hoge:state.hoge};
+  return {clicker:state.clicker};
 }
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators(Object.assign({}, HogeActions), dispatch)
+    actions: bindActionCreators(Object.assign({}, ClickerActions), dispatch)
   };
 }
-export default connect(mapStateToProps)(Hoge);
+export default connect(mapStateToProps, mapDispatchToProps)(Clicker);
 ```
-この状態で<Hoge>を複数箇所に使用したとき、storeにはhogeという入れ物は1つしかないので相互に影響してしまうため、独立したデータで持ちたい。
+この状態で<Clicker>を複数箇所に使用したとき、storeにはclickerという入れ物は1つしかないので相互に影響してしまうため、独立したデータで持ちたい。
 ```JavaScript
-class A extends Component {
+class Hoge extends Component {
   render() {
+    return (
+      <div>
+        <div>
+          <h1>Clicker 1</h1>
+          <Clicker/>
+        </div>
+        <div>
-    return <div><Hoge/><div>;
+          <h1>Clicker 2</h1>
+          <Clicker/>
+        </div>
+      <div>;
   }
 }
 ```
-```JavaScript
-class B extends Component {
-  render() {
-    return <div><Hoge/><div>;
-  }
-}
-```
-Aの中のHogeをHoge1、Bの中のHogeをHoge2としたとき、Hoge1、Hoge2で独立したデータを持てるようにしたいです。Hoge1で発生したactionはHoge1にのみ影響を与えるようにしたいです。いまのままだとHoge1が書き換わるとHoge2も同時に書き換わってしまいます。そもそもreducerがhogeという共通のものを使ってしまう以上、store内に保存されるデータを別々にすることは出来ないのでしょうか？
+このように複数箇所で使用した場合、Clicker 1とClicker 2で独立したデータを持てるようにしたいです。Clicker 1で発生したactionはClicker 1にのみ影響を与えるようにしたいです。いまのままだとClicker 1が書き換わるとClicker 2も同時に書き換わってしまいます。そもそもreducerがclickerという共通のものを使ってしまう以上、store内に保存されるデータを別々にすることは出来ないのでしょうか？
 ### 試したこと

修正。

2018/03/23 06:22

投稿

masaya_ohashi

スコア9210

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -7,20 +7,29 @@
 ### 該当のソースコード
+例として、Clickするたびにカウントが1増える<Hoge>というComponentを作ります。
 ```JavaScript
-// components/Hoge.js
+// actions/hoge.js
-class Hoge extends Component {
+function hogeClick() {
-  // 省略
+  return {type:'hoge.click'};
 }
-function mapStateToProps(state) {
+const HogeActions = {
-  return state;
+  hogeClick
-}
+};
-export default connect(mapStateToProps)(Hoge);
+export default HogeActions;
 ```
 ```JavaScript
 // reducers/hoge.js
+const initialState = {value:0}
+function hoge(state=initialState, action) {
-function hoge() {
+  switch(action.type) {
-  // 省略
+    case 'hoge.click':
+      let ret = Object.assign({}, state);
+      ret.value++;
+      return ret;
+  }
+  return state;
 }
 ```
 ```JavaScript
@@ -33,6 +42,25 @@
 export default mainApp;
 ```
+```JavaScript
+// components/Hoge.js
+class Hoge extends Component {
+  render() {
+    return <div onClick={e=>this.props.actions.hogeClick()}>{this.props.hoge.value}</div>;
+  }
+}
+function mapStateToProps(state) {
+  return {hoge:state.hoge};
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Object.assign({}, HogeActions), dispatch)
+  };
+}
+export default connect(mapStateToProps)(Hoge);
+```
 この状態で<Hoge>を複数箇所に使用したとき、storeにはhogeという入れ物は1つしかないので相互に影響してしまうため、独立したデータで持ちたい。
 ```JavaScript

追記修正。

2018/03/23 06:14

投稿

masaya_ohashi

スコア9210

title CHANGED Viewed

File without changes

body CHANGED Viewed

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

追記

2018/03/23 06:02

投稿

masaya_ohashi

スコア9210

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -35,6 +35,22 @@
 この状態で<Hoge>を複数箇所に使用したとき、storeにはhogeという入れ物は1つしかないので相互に影響してしまうため、独立したデータで持ちたい。
+```JavaScript
+class A extends Component {
+  render() {
+    return <div><Hoge/><div>;
+  }
+}
+```
+```JavaScript
+class B extends Component {
+  render() {
+    return <div><Hoge/><div>;
+  }
+}
+```
+AとBの中でそれぞれ<Hoge>を使用した際、A側のHogeがなんらかの契機でactionを発行すると、B側も同じstoreを参照しているため書き換わってしまうのをどうにかしたいです。
 ### 試したこと
 いろいろ調べようとしているのですが、どういう用語で調べたものかわからず、なかなか情報に行き当たりません…

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

2018/03/23 05:58

投稿

masaya_ohashi

スコア9210

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -19,7 +19,7 @@
 ```
 ```JavaScript
 // reducers/hoge.js
-function proc() {
+function hoge() {
   // 省略
 }
 ```