React + Redux + Railsで、Providerが複数個できないようにしたい

Question

#やりたいこと
Rails側で複数のページを用意する

<div id="header"></div>
<div id="content"></div>

このidによってReactの何を表示するか変えたい。

#試したこと

ReactDOM.render(
  <Provider store={store}>
    <Header />
  </Provider>,
  document.querySelector('#header')
);
ReactDOM.render(
  <Provider store={store}>
    <Content />
  </Provider>,
  document.querySelector('#content')
);

このようにすると、#contentがないページなどではエラーが出たため、以下のように変更

if (document.getElementById("header") != null) {
  ReactDOM.render(
    <Provider store={store}>
      <Header />
    </Provider>,
    document.querySelector('#header')
  );
};
if (document.getElementById("content") != null) {
  ReactDOM.render(
    <Provider store={store}>
      <Content />
    </Provider>,
    document.querySelector('#content')
  );
};

このようにするとProviderが複数個できてしまうので、Providerの中をIDごとに出し分けたいです。
ご教授いただけるとありがたいです、よろしくお願いします。

Answer 1

やったことなので、わかりませんが、

https://github.com/reduxjs/react-redux/issues/355

この辺を参考にすると良さそうな気がします。

---

ただ、基本reactはnestして展開していくライブラリです。
複数にすることによる弊害などもあるかと思います。例えば、contentのcontextをheaderが見れないなど。

#appにしてシングルマウントにしたほうが後々詰まることが少ない気がします。

自分はRailsでReactを使う場合は、

・storeを使わないで、常にrailsのviewからpropsを渡す

もしくは

・railsのviewを使わない（layoutのみ）でspaにしてしまう

という感じでやっています。そのほうが責務が混在しなくてやりやすいのと、詰まったときに解決しやすいので。

---

参考になれば幸いです

Comments

[asimoto]

ありがとうございます！
spaにすることを決断しました！