redux-router導入時に苦しんだこと - 株式会社BEFOOL ブログ

最近、「react+redux」という構成で開発に携わる機会をいただきました。
reactに関しても、reduxに関しても、初心者丸出しで作業している訳ですが、今回このような機会をくれたクライアントに本当に感謝です。

このような初心者状態を脱するべく、プライベートでのプログラミングをすべて、railsおよび、react+reduxに移行することを決意。
目下作成中のアプリがあるのですが、そちらを現在のものから、乗せ替えを進めている次第です。

さて、そのような状況下で、のっけから躓（つまづ）くような状況でしたので、記録を残しておこうと思います。

ruby側システム構成

ruby: 2.3.3p222
rails: 5.0.2
react_on_rails: 6.8.2

ruby側のバージョンになどに関しては、上記の同メジャーバージョンであれば、さほど問題は起きないかと思われます。苦しんだのはjs側の依存関係になるので、そちらは後ほど別途記載します。

createHistory is not a function

エラーが発生する時のコード

client/app/stores/store.js

import { createStore } from 'redux'
import { reduxReactRouter } from 'redux-router'
import { createHashHistory } from 'history'
 
const configureStore = (routes, reducer, railsProps) => {
  return reduxReactRouter({routes, createHashHistory})(createStore)(reducer, railsProps)
}
 
export default configureStore

修正されたコード

client/app/stores/store.js

  const configureStore = (routes, reducer, railsProps) => {
-   return reduxReactRouter({routes, createHashHistory})(createStore)(reducer, railsProps)
+   return reduxReactRouter({routes, createHistory: createHashHistory})(createStore)(reducer, railsProps)
  }

期待しているキーがあるようなので、そちらを指定したら解決しました。

import { createHashHistory } from ‘history’

ここの書き方次第でも解決可能かと思いますが、自分は渡す際にキーを指定するスタイルの方が好きなのでこうしました（ｷﾘｯ

Cannot read property ‘location’ of undefined

react-router側のコードを追っていると、期待している引数に対して、redux-router側で値を明らかに渡していない箇所がありました。
おそらくバージョンの違いなんだろうということで、react-router側の変更履歴を追っていると、それっぽい修正が入っていたので、それにredux-router側が対応できていないんだろう予想。

react-routerは「v3系」を使用していたんですが、「v2系」を指定することで解消されました。

エラーが解消された時のjs側バージョン関係

react-on-rails: 6.8.2
react-redux: ^5.0.3
react-router: ^2.0.0
redux: ^3.6.0
redux-router: ^2.1.2
history: ^2.0.0

(なんかhistoryのバージョンも重要だということなんで、一応掲載しておきます)

?_k=[hash]

なんか、URLに変なhashが付与される

「 localhost:3000/#/?_k=v8st6c 」のような変なhashがURLにつく。
え、なにこれきもちわるい。

これを解消するには、createHashHistoryのオプションに「queryKey: false」を指定できればいいみたいでした。

see also: https://github.com/ReactTraining/history/issues/47

client/app/stores/store.js

+ const dontUseHashKey = (options) => createHashHistory(Object.assign({queryKey: false}, options))
 
  const configureStore = (routes, reducer, railsProps) => {
-   return reduxReactRouter({routes, createHistory: createHashHistory})(createStore)(reducer, railsProps)
+   return reduxReactRouter({routes, createHistory: dontUseHashKey})(createStore)(reducer, railsProps)
  }

ライブラリのコードを追って、今起きている問題がなぜ起きているのか把握もできて、どのような対応をとればいいのかもだいたいイメージできるのですが、それでもjs力がまだ低くて、正確なコードを書くのに時間がかかります。

けど負けない。