まえがき
業務でReactを触る機会が出てきそうなので、復習のため、以前作ったポートフォリオを個人的に振り返ります。
フロントエンド
https://github.com/momonoki1990/house_work_memo_front
バックエンド(Express)
https://github.com/momonoki1990/house_work_memo_back
サービス
https://house-work-memo-front.herokuapp.com/
(Herokuのフリープランで定期モニタリングも解除したので、起動がめちゃ遅いです(1分くらい?))
(表示が変な場合は、バックエンドの起動に時間がかかっています。そのままお待ちいただくと表示されます)
前回
未経験がポートフォリオで使ったReactライブラリ(その1)
https://qiita.com/momonoki1990/items/a1edd4fa922cd3ed3b14
未経験がポートフォリオで使ったReactライブラリ(その2)
https://qiita.com/momonoki1990/items/49f490378c724daaaf68
React Router関連
react-router-dom connected-react-router @types/react-router-dom
react-router-dom
SPAでは全てのアクセスはindex.htmlにリダイレクトされます。
その為、サーバーサイドではなくクライアントサイド（Webアプリ側）でルーティングできます。
２時間で作れる簡単フォーラムWebアプリ！
https://www.techpit.jp/courses/20/curriculums/21/sections/184/parts/663
Reactでページを切り替える(「遷移」といっていいんだろうか..)ために使います。
react-routerとreact-router-domがあり、迷いましたが、
結論
迷わずreact-router-domを使おう。
react-routerとreact-router-domの違い
https://qiita.com/koja1234/items/486f7396ed9c2568b235
とのことで、react-router-domを使いました。
connected-react-router
SPA（Single Page Application）は、描画されるコンポーネントが変わって画面が遷移したように見えてもURLは変わっていません。
なので、ユーザーはブラウザの「戻るボタン」を押しても前の画面に戻れないのですね。
ページ遷移なしで画面がヌルッと切り替わることがSPAのメリットであると同時に、ブラウザの「戻るボタン」を使えないのはユーザービリティを下げかねないですよね。
そこでconnected-react-routerを使って、SPAだけどURLルーティングを実装します。
connected-react-routerでSPAの描画をURLで切り替える
https://tech.playground.style/javascript/connected-react-router/
URLルーティングを実装するために使います。
文字だけで書いてるとわかりづらいですが、react-router-domだけだと、表示するページが変わっても、URLは変わらないし、「戻る」「進む」ボタンも使えないんですね。
connected-react-routerを使うと、react-routerによるルーティングの状態をReduxで管理できるようになります。
具体的には、表示されるページが切り替わるとURLが変わり、「戻る」「進む」ボタンが使えるようになります。
Redux Logger
redux-logger @types/redux-logger
redux-loggerは数あるredux middlewareの中で一番知られているものではないでしょうか。
(中略)
ActionがDispatchされる前後のstateとDispatchされたActionをconsole上に出力します。
意図したActionが発動しているか、その前後で期待したstateの変更が意図した通りに行われているかどうか
確認するためにはとても有用です。
redux-loggerの導入とオススメのLog出力設定の紹介
https://qiita.com/tatapopo/items/3bdf2f3132948e3d75e3
上で説明されているとおりですが、ActionをDispatchする(Reduxのstateを変更する)前後のstateの中身が見えるようになるので、便利です。
使うのも、基本的にReduxのStoreを作成する際に、applyMiddlewareに噛ませるだけなので、簡単です。
あとがき
以上です。復習のためまとめてみましたが、いろんな方の記事の切り貼りになってしまいました。
でも、それでいいのか！