質問: react + redux でSPAを開発している者です。 開発中に気付いたのですが、ウィンドウAとウィンドウBで同じページを表示し、ウィンドウAで操作をした結果がウィンドウBにも反映されてしまいます。 構成として、モーダルの表示状態等閉じた環境で構わない情報以外は全て唯一のstoreで管理しています。(reduxですから当然ですね) reduxにおける唯一のstoreってこういうものなのでしょうか?てっきりページ毎にインスタンス持つのかと...でも後述の通り別タブなら問題無く個別にstateが管理できます。 ちなみに、ログイン等APIコール、フォームの値入力、どちらもウィンドウBにも結果が返ってきてrenderがかかるようです。 ### 試したこと 1Chromeで複数タブ開いて動作確認 →dispatchによるrenderはそれぞれのタブできちんと捉えられる 2Chromeで別ウィンドウで開いて動作確認 →dispatchによるrenderが両方のウィンドウで発生する 3ChromeとEdgeで動作確認 →dispatchによるrenderが両方のウィンドウで発生する 4Chromeで複数タブ、Edgeで複数タブ開いて動作確認 →dispatchによるrenderがEdgeのとあるタブで発生する。全タブでは無く、Chrome側のタブAに対してEdgeと側のタブBがrenderされると言った、ある程度のルールがあるよう ちなみに、Reactとreduxのバージョン自体は去年の8月くらいのものです。(詳しく確認後投稿します) reduxのstoreの保持の仕方が悪いのかもしれません。どなたかこの事象についてお分かりの方はいらっしゃいますでしょうか。 2017/10/18 バージョン追加します react:15.5.4 redux:3.6.0 react-redux:4.4.8
回答: 自己解決しました。 結論から申し上げると、開発時にBrowserSyncを用いていたことが原因でした。 そもそもstoreが共有してるのかと思い、providerに渡す際に毎回クローンするように作り変えたのですが、それでも発生し、調査を続けるとクリックイベントが同じように飛んできていることがわかりました。 テスト環境用にnodeモジュールのBrowserSyncを使用していましたが、設定でイベント共有をオフにしておらず、各ブラウザに通知が行っていたようです。単にファイル監視して更新があった場合にページの自動更新をする機能と思い込んでいたのが間違いの元でした... m0a様、いろいろとありがとうございました。