Redux-router導入時に苦しんだこと

木内智史之介(シャッチョー)
ミンカさんけっこんしてくださいおねがいします(ズザー
SEGAさん、DIVAの筐体ください(ズザー

最近、「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

1
2
3
4
5
6
7
8
9
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

1
2
3
4
  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」を指定できればいいみたいでした。

client/app/stores/store.js

1
2
3
4
5
6
+ 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力がまだ低くて、正確なコードを書くのに時間がかかります。

けど負けない。