React+Reduxで、Reduxと紐付いたComponentを複数箇所で使う場合の書き方がわからない

Question

前提・実現したいこと

例えばclickerという名前のReducerと、store上のclickerのデータを参照するClickerというComponentがあるとします。
このClickerというComponentを複数箇所で使う場合、storeの中にはclickerという名前のものが1つしかないのですが、それぞれの使用箇所で独立した状態で管理するにはどのように書くのが一般的なのでしょうか？そもそもこのように汎用的なComponentの内部情報をReduxで管理するのが間違いなのでしょうか？

発生している問題・エラーメッセージ

別々のデータをstoreで扱いたいが、共通になってしまう。

該当のソースコード

// actions/clicker.js
function clickerClick() {
  return {type:'clicker.click'};
}
const ClickerActions = {
  clickerClick
};
export default ClickerActions;

// reducers/clicker.js
const initialState = {value:0}
function clicker(state=initialState, action) {
  switch(action.type) {
    case 'clicker.click':
      let ret = Object.assign({}, state);
      ret.value++;
      return ret;
  }
  return state;
}

// reducers/main.js
const mainApp = combineReducers({
    main,
    clicker, // ←reducers/clicker.js
});

export default mainApp;

// components/Clicker.js
class Clicker extends Component {
  render() {
    return <div onClick={e=>this.props.actions.clickerClick()}>{this.props.clicker.value}</div>;
  }
}
function mapStateToProps(state) {
  return {clicker:state.clicker};
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Object.assign({}, ClickerActions), dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Clicker);

この状態で<Clicker>を複数箇所に使用したとき、storeにはclickerという入れ物は1つしかないので相互に影響してしまうため、独立したデータで持ちたい。

class Hoge extends Component {
  render() {
    return (
      <div>
        <div>
          <h1>Clicker 1</h1>
          <Clicker/>
        </div>
        <div>
          <h1>Clicker 2</h1>
          <Clicker/>
        </div>
      <div>;
  }
}

このように複数箇所で使用した場合、Clicker 1とClicker 2で独立したデータを持てるようにしたいです。Clicker 1で発生したactionはClicker 1にのみ影響を与えるようにしたいです。いまのままだとClicker 1が書き換わるとClicker 2も同時に書き換わってしまいます。そもそもreducerがclickerという共通のものを使ってしまう以上、store内に保存されるデータを別々にすることは出来ないのでしょうか？

試したこと

いろいろ調べようとしているのですが、どういう用語で調べたものかわからず、なかなか情報に行き当たりません…

【追記】
この方も同じような悩みを抱えているようです。しかしスマートな解決法は見つかっていないようです…
https://qiita.com/derui@github/items/8272c5cb7eb7fc3ecd67

補足情報（FW/ツールのバージョンなど）

package.json一部抜粋

    "react": "^16.2.0",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",

Comments

[HayatoKamono]

何をしたいのか、何に困っているのか、状況がよく伝わってこないので、もう少し詳細な内容を追記頂けますでしょうか？また、コンポーネントAとBを作って、それらを使っているコードを追記頂けますでしょうか？

[masaya_ohashi]

修正してみました。

Answer 1

質問者様がおっしゃっている通り、 同じreducerを利用している以上、同じstateを更新することしか出来ません。
reducerのstate内で分けて持つようなことも出来ますが、管理が煩雑になるためあまりおすすめ出来ません。

そもそも、reduxと紐づけたreact componentを複数箇所で使っている以上、同じデータを更新するのが期待される動作かと思いますので、別のデータを管理したいのであればcomponentを共通で使用すること自体設計が間違えているように思います。

Componentを共通で利用したい理由がデザインの共有等にあるのであれば、HoCを用いてデザインとClickイベントのみを持ったComponentと、Clickされたときの処理を定義するComponentに分けて実装するのがよいかと思います；。
HoCについては以下が参考になるかと。
https://postd.cc/react-higher-order-components-in-depth/
https://qiita.com/numanomanu/items/2b66d8b2887d44f857dc

Answer 2

初期の質問文から最終的な質問内容にだいぶ変化し、質問もシンプルなものになっていたため、元の回答を削除し、現在の質問文をベースにした回答に変更 - 2018/03/27

#1

class Hoge extends Component {
  render() {
    return (
      <div>
        <div>
          <h1>Clicker 1</h1>
          <Clicker/>
        </div>
        <div>
          <h1>Clicker 2</h1>
          <Clicker/>
        </div>
      <div>;
  }
}

↑この場合であれば、Clickerコンポーネントをstoreに繋げるのではなく、Hogeコンポーネントをstoreに繋げて、Clickerが必要とするアクションやデータをpropsで渡してあげるのが一般的なやり方かと思います。

#2

// reducers/clicker.js
const initialState = {value:0}

↓

// reducers/clicker.js
const initialState = [
  { id:1, value:0 },
  { id:2, value:0 }
];

Hogeコンポーネントでは、storeから参照できる上記のような配列をmap overしてclickerコンポーネントをレンダー。

#3

// actions/clicker.js
function clickerClick() {
  return {type:'clicker.click'};
}

↓

function clickerClick(id) {
  return {
    type:'clicker.click',
    payload: id
  };
}

action creatorの引数でclickerのidを渡せるようにして、reducerがどのclicker idのデータかを判別できるようにし、クリックされたidのカウントをreducerでインクリメントして、新しいstateを返す。

Comments

[masaya_ohashi]

もっと実際の使用シーンに沿ったクラス名に変えてみました。

[masaya_ohashi]

回答のほう読ませていただきましたが、やはりstate内で各使用箇所でidを振ってやるしかないのでしょうか…その方法は思いついていたのですが、あまりにもスマートでないというか…こういう汎用的なものはReduxよりReactのstateに任せるべきですかね？

[HayatoKamono]

すみません。名前がHogeやClicker1,2になっても尚、具体的なシーンがわからず何にしたいのか分かってません。とりあえず、抽象的な回答を１つ追加すると、「 function clickerClick() {　return {type:'clicker.click'};　} 」のclickerClickの引数に例えば、idなどの値を渡して、action objectにtypeだけではなく、引数に渡ってきた値も加えて、reducerに投げてあげれば、reducer側でなんか出来るのだと思います。（抽象的な回答にまたもやなりますが。。）

[HayatoKamono]

> こういう汎用的なものはReduxよりReactのstateに任せるべきですかね？

Reduxを使うのであれば、Reactで持たせるstateはUIに関するstateにしてビューに徹させた方が良いかと思います。

[masaya_ohashi]

私と同じ問題を抱えた人を見つけたので参考としてURLを貼りました。
この人は「エディタ」を作ろうとして、同一ページ上に複数のエディタを並べたときに、それぞれ独立したデータを持たせたいようです。

[HayatoKamono]

リンク先拝見しましたが、リンク先の方とmasaya_ohashiさんが同じ問題を抱えているのかどうかの判断は、自分にはこの質問文のコードからは付きませんでした。

また、リンク先の2年ほど前の記事ですが、なぜ「全てのエディタコンポーネントで別のStoreを持つ」ことをしたいのかの理由が書かれていないようでしたし、その少し前に書かれていた「それを一つのStoreの中に配置しようとした時に、 エディタ側は渡されるStoreの構造に依存したくない」という部分に関しては同記事前半で述べられているpresentaional component とcontainer componentの分離でそれこそ解決することなのではと思いましたし、リンク先記事についてもいまいちよく分かりませんでした。

とりあえず、私からは以上と致します。

[masaya_ohashi]

これはわかりやすい回答ですね！
なるほど親にひも付けをさせるという発想はなかったです。これなら様々な場所でidさえ割り当てればデータを別にできそうです。

[HayatoKamono]

おー、それは良かったです！最初のややこしい質問内容に引きずられていたみたいで、最終的に編集された内容に上手く回答出来てなかったみたいです。

Answer 3

https://redux.js.org/recipes/structuring-reducers/reusing-reducer-logic

公式的には

• reducerで複数の名前で登録する
• actionのtypeの末尾にIDを付与してdispatchする
• 該当するreducerが受け取る
• 各Componentは自身に紐付くstoreのデータを使う

というのが再利用可能reducerの作り方だそうです…1個2個程度ならいいですがたくさんの場所に使う場合、あまりにも不便過ぎます…

拡張パッケージ等でCoolなものがないか、しばらく質問は未解決のままにしておきます。