コード上の調整

[hrddd]

• testの拡充（Containerにも書く）
• component管理（分割する）
• router
• 非同期処理（hooksに逃しているが、やっぱcomponent寄りな副作用管理の気持ちがしているので、データの副作用は別途がいい気がしている。今は単に気持ちの問題だが、middlewareとか、そこらへんのが筋がいいだろう、、、かなあ、、、一旦おいといて、きっつ、となったら組み直すのが学び多いかも）
• middleware(ローディング)

[hrddd]

component管理（分割する）

意識していたのでパキパキわれば終了

かかった時間

30分

[hrddd]

component管理（分割する）

Containerはそうはいかなかった 一旦全てContainerにしてみたが、うーんて感じ。 pagesにもしてみるものの、やっぱりうーん。 routerを入れるといい感じになるような気はする

かかった時間

1.5時間

[hrddd]

router

うーん、、、 やったが、、、 下記が問題。解決していく。

• テストがめんどい（目で見るしか）
• それぞれに直接landingする時に、stateが初期化されてしまう（そらそう）// fetchDataが呼ばれないから、、、
• fetchDataはライフサイクル的にuseEffectじゃない、、

失敗したな、と思ったとこ

• containerにテストを作らずpagesを区切った

  • データが取得できる、、的なところもコピペとか、、できたかな？ただ3つに同じ記述あるのも微妙だし、実際はrouter前提で作るから、こういう手順は取らない、、のでいい、、か・・？

• fetchDataをhooksにしたこと（reduxの方が結びつき深いので、そっちで調整した方が、影響ファイルが限定的になりがち）

• fetchDataはライフサイクル的にuseEffectじゃない、、

  • おかしいとは気づいていたけどめんどくさそうだったから後回しパターン

かかった時間

3時間くらい

[hrddd]

routerその２

それぞれに直接landingする時に、stateが初期化されてしまう（そらそう）// fetchDataが呼ばれないから、、、

formの 入力→確認→完了が似ているかな、と思った。 formの場合、、サーバの方で入力情報をキャッシュしているんじゃないかしら、と思う。 確認画面でAPIを叩き、復帰作業ができるようにしとくんじゃないかな、と思った。

ゲームも同じかなあ（途中復帰可能にしておく）と思う。 あとで実装したい。

一旦、それぞれのページに復帰作業はつけず、startにリダイレクトするように調整。

PWA化のあたりで、永続化してもいいかな、と思った

かかった時間

5時間くらい

メモ

Auth的な機能、どう実装するのがいいんだ？ と思って色々調べた。

結局採用したのは、 https://reactrouter.com/web/example/auth-workflow である。 Routerのmiddleware的にcomponentを作る感じ。 コード的な結びつきが弱いのでアレだけど、ライトでいい（開始画面でしか情報取得しない。そこにリダイレクトかける）かなって。イメージ的にはAuthだね、、

その他、 connected-react-routerを使って、Reduxのmiddlewareで受ける方法 → 他にmiddlewareの使い所ある、routerの設計とそのmiddlewareは別個にしたい、、、かなあ

useEffectで受ける → view(container)にリダイレクトあるの違和感（違和感ってだけ）なのと、一旦virtual domの評価走っちゃうのがいやらしい

[hrddd]

routerその3

ふと、画面用のパラメータとrouter用のパラメータが混ざっていたのが気になった。 selectorを分けた。 これでまあ、影響範囲の限定がちょっとされたかな、、と思う

かかった時間

30分

[hrddd]

飽きてきたので

• testの拡充（Containerにも書く）
• 非同期処理（hooksに逃しているが、やっぱcomponent寄りな副作用管理の気持ちがしているので、データの副作用は別途がいい気がしている。今は単に気持ちの問題だが、middlewareとか、そこらへんのが筋がいいだろう、、、かなあ、、、一旦おいといて、きっつ、となったら組み直すのが学び多いかも）
• middleware(ローディング)

はPWA化/lint調整のあとらへんにやる