Reactに状態管理ライブラリを導入するのは段階的にやっていくのでも遅くないという話と、MobXがよさそうという話
Reactを始めてみたはいいけど、最初の設計段階で状態管理することを考慮してライブラリ導入しなきゃいかんのでしょ?
と思っていたんですが、意外とそうでもなくて、アプリの骨子をReact標準のPropsとStateだけで組んでから、複雑度が増してきた段階でReduxやMobXを導入しても遅くないんだなぁというのが最近ようやく分かったので、道のりをまとめておこうと思います。
また、ReduxとMobXを両方試してみての感想も後半に書いてみました。
なお、Reduxについての言及が多めですが、これは「Reduxは5時間ぐらい試して上手く行かなかったけど、MobXは1時間で上手くいくようになった」というだけの話ですので、特に意図はないです。
Google Home mini からパソコンの電源を入れられるようにした【Google Assistant + IFTTT + Raspberry Pi】
GoogleHomeでパソコン起動させるやつです pic.twitter.com/AQf0OOzdKd
— 八遊菜 (@happou31) 2018年3月6日
我が家にもGoogle Home miniが来たので、色々遊んでみました。 ざっくりこういう仕組みです↓
続きを読むSwitchが盗まれたので買い直したらアカウント関連でドタバタした話
Switch落とした…ありえんけど…
— すっごーい菜 (@happou31) 2017年9月24日
となってから、
ウオオオオオオオオオオオオオオオアアアアアアアアアアアアアアアアアアアアアアアアアアアアアア!!!!!!!!!!!!!!! pic.twitter.com/9tLSLc0bPX
— すっごーい菜 (@happou31) 2017年10月4日
こうなるまでの話です。
ポイントは2つです。
- ユーザー側からは「ダウンロード出来る本体」の紐付け解除は、紐付けを行った本体からでしか行えない
- サポートに問い合わせる際に「新しい本体の製造番号」をアカウントの情報と共に伝えれば、紛失した本体の登録を解除する対応をしてもらえることがある
ニンテンドーアカウントとダウンロードソフトについては権利がガチガチなイメージがありましたが、特に任天堂と揉めたということはなく、非常に丁寧かつ素早く(2回問い合わせて合計4営業日)対応して頂けました。本当にありがとうございました。
以下は、どうしてこうなったかを時系列順にお話しします。
【Angular4】FormGroupに入れ子になったFormArrayをComponentの親子で共有する
Angular4でも2でも動くと思うけど4って書いたほうがかっこいいかなと思って。
Angular4でComponentを書いてるとしばしば次のような問題にブチ当たります。
Componentが無限にデカくなる
最初から適切に画面の分割ができていればいいんですが、実際のプロダクトだと設計書の段階ですでに闇鍋だったりして、頑張ってServiceにロジックを詰め込んでも、一つのcomponent.tsがUI操作だけで2000行とかになったりして無事に死にます。
これに対する応急措置として、親子関係を作ってComponentを分割するというのがありますが、FormGroupを使って入力値の管理をしている場合は一筋縄では行きません。(僕は行きませんでした)
特に、親元のFormGroupの中にFormArrayが入っていてるときに、その部分を分割しようとすると、子Componentから直接親のFormGroupが見えないため、Cannot read property 'getFormArray' of null
ようなエラーが出て上手く動きません。
公式ドキュメントもイマイチ参考にならなかったので色々試行錯誤したところ、ようやくうまくいく方法が見つかったので、覚え書きしておきます。