始めに
Reactのデータ管理でよくReduxが挙がると思うのですが、これは一々アクションを定義して、reducerで値を返すように設定して・・・と割と面倒でした。これに対してmobxは1ファイルで完結できて、楽にデータ管理できるかと思って試してみました。ただやってみた結果、デバッグ周りで結構難点なところがあったのでそれをまとめてみました。
困ったところ
データの確認がしづらい
mobxはES2015のProxyという機能を使っているようで、これによってデータをそのまま表示してもすぐには中身が分からず、クリックする必要があります。これはVuexもgetter、setterを使っていて似た状況になっていたので仕方ないと思っていたのですが、クリックしなきゃいけない回数が非常に多いです。。。
特にオブジェクト配列で、オブジェクトの中身を見るのに6回クリックしています。
IE対応で4系に落とすと悲惨
IEだと今の5系のmobxは動かないようで、4系に落とさないといけません。
4系から5系の変更が結構大きくて、特に配列のデータ構成が大きく異なります。下のキャプチャ画像を見ればわかると思いますが、undefinedの要素が大量に作られてしまいます・・・。
ちなみにこれは1000個作るようです。こんなことされたら更にデータの確認が辛くなりますね・・・。
どうやら一度空のオブジェクトを用意して、そこに必要な項目を入れていくようです。おまけにこのデータは配列ではなくオブジェクトで実装しているので、PropTypesとかで配列として定義しているとエラーが出されます。エラーを避けるために配列なのにオブジェクト型として定義するという意味不明なことをしないといけなくなってしまいます。
僕はなんとかIEでも5系で動くようにsymbolとproxyのpolyfillを入れてみましたが、動作が不安定なようで、スタックオーバーフローになってしまって結局動きませんでした。
終わりに
mobxの機能自体は結構良かったと僕は思っています。しかし、データの確認が面倒だったり、5系でIE非対応なところがかなり痛かったです。4系のmobxはとても受け入れられなかったので・・・。とても惜しいですが結局今はReduxを使っています。皆さんもmobxを使う際はこの辺のことを検討したうえで使っていただけると幸いです。
それにしても、最近IEを切ってくるライブラリ増えましたね・・・。Swiperとか、querystringとか。