ゆるふわ技術日誌

エンジニア見習いの悪戦苦闘日記

real world exampleを読んで

昨日も書いたような気がしますが、SPAのステートの設計があまりにも難しくて、コード書いてて破綻し始めてしまったので、real world exampleのコードを読んだり書き換えたりしながら学ぶことにしました。

real world example

github.com

これは、React + Reduxで書かれているものだが、他にもいろいろな言語で書かれた同じアプリケーションがたくさんあるので、比較する際にも参考になる。

感想や気付き

  • containerとpresentation componentは特に分けて書いたりしてない。この方が見通しがいいというか、行き来しながらコード読まなくていいのでいいなと思った。これからはこっちで書く。
  • appLoadedというステートをReduxの中に用意して、最低限必要なAPIコールが終わるまではヘッダーだけを表示するという挙動をしている。
  • トップレベルのコンポーネントcomponentWillReceivePropsの中でredirectのstateが書き換わった際にredirectを行うコードがあった
    • ただ、現行のReactではcomponentWillReceivePropsはUNSAFEという接頭語がついて非推奨になっているので似たような実装をするとしても違うライフサイクルメソッドを使う必要がある。
  • componentWillMountの中でlocalstorageに保存してあるJWTを取ってきてapi clientに対してセットしていた。やっぱりAPIを叩く部分はそういう感じで切り出してあげた方がいいなと思った。
    • しかし、componentWillMountも非推奨になってしまっている
  • react-reduxのmapDispatchToPropsは単にActionCreatorを渡すだけじゃなくて、そのコンポーネントに合わせた形にしてあげる方が使いやすそう。
  • 使いまわさないコンポーネントはファイル分けずに、作ったりしてる。その方が確かに見通し良いかも。
  • 非同期処理に関してはpromiseがpayloadとして渡された際に、resolveになったタイミングでactionをdispatchするmiddlewareをかましている
    • thunkより個人的にはわかりやすいかもしれないと思ってしまった。

ザクっと読んだだけでもこれだけ出てくるし自分の知識もまだまだだったなぁという反省。もっと深く読んでいきたいところだが、研究室関連でやることを思い出してしまったので今日はこの辺に。

雑談

でへへへ

ビルドがむっちょはやい。