未経験がポートフォリオで使ったReactライブラリ(その2)

まえがき

業務で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

使用したモジュール

package.json

"dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/chart.js": "^2.9.23",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.12.50",
    "@types/react": "^16.9.43",
    "@types/react-dom": "^16.9.8",
    "@types/react-redux": "^7.1.9",
    "@types/react-router-dom": "^5.1.5",
    "@types/redux-logger": "^3.0.8",
    "@types/redux-thunk": "^2.1.0",
    "axios": "^0.19.2",
    "chart.js": "^2.9.3",
    "chartjs-plugin-colorschemes": "^0.4.0",
    "connected-react-router": "^6.8.0",
    "date-fns": "^2.15.0",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.10.0",
    "react-dom": "^16.13.1",
    "react-hook-form": "^6.1.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3",
    "redux": "^4.0.5",
    "redux-devtools": "^3.5.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "typescript": "^3.7.5",
    "typescript-fsa": "^3.0.0",
    "typescript-fsa-reducers": "^1.2.2"
  }

Redux

redux react-redux redux-thunk typescript-fsa typescript-fsa-reducers
@types/react-redux @types/redux-thunk redux-devtools

Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。
Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJSやjQueryなどと併せて使用することもできますが、Reactと使用するのが一番相性がいいです。
Redux入門【ダイジェスト版】10分で理解するReduxの基礎
https://qiita.com/kitagawamac/items/49a1f03445b19cf407b7

Reactでは、stateという「状態」、というか個別の値を、コンポーネントごとに設定することができます。
Reduxは、コンポーネントごとのstateとは別に、stateを一元的に保持・管理できる場所です。
(要は、通常のstateがコンポーネントごとにローカルにstateを設定・参照できるのに対し、Reduxは、stateをグローバルに設定・参照できる)

Action
アクション（何が起きたのか）とそれに付随する情報を持つオブジェクト。
ActionをStoreへdispatch（送信）すると、Storeのstateが変更される。stateの変更は必ずActionを経由して行う（理由は後述）。
Reducer
Storeから受け取ったActionとstateに応じて、変更されたstateを返す純粋関数（同じ引数を渡されたら必ず同じ結果を返す関数）。
Store
アプリケーションの全てのstateを保持するオブジェクト。
Redux 入門 〜Reduxの基礎を理解する〜
https://qiita.com/soarflat/items/bd319695d156654bbe86

Providerの目的は2つ

1. Reactコンポーネント内でreact-reduxのconnect()関数を使えるようにすること
2. ラップしたコンポーネントにstore情報を渡すこと
   ReactとReduxを結ぶパッケージ「react-redux」についてconnectの実装パターンを試す
   https://qiita.com/MegaBlackLabel/items/df868e734d199071b883

→ちなみに、私のポートフォリオでは、connect使っていません(どうしたんだっけ？)
とりあえず、Providerの役割として、「ラップしたコンポーネントにstore情報を渡す」(要は、Reduxで管理しているstateを使えるようにする)だけ覚えておきます。

reduxとreact-redux

reduxとreact-reduxって、どう使い分けるんだっけ？

redux
Redux本体です。

react-redux

Reduxは、Reactの一部ではなく、独立したソフトウェアです。そこで、ReactとReduxをシームレスに融合して使うためのパッケージを追加しておきます。
React.js & Next.js超入門(p.192)
https://www.amazon.co.jp/dp/B07X7DHZ9F/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

具体的には、
createStore, combineReducers, applyMiddlewareなど、Reduxのストアを作るための機能や、Dispatch, AnyActionなどの型情報はredux、

Provider, useSelector, useDispatchなどの、ReactにReduxのstateやdispatchを渡す機能はreact-redux

と、ざっくりと覚えておくことにします。

redux-thunk

なんだっけ、これ。。。
確か、非同期処理を含むアクションをdispatchするのに必要で、createStoreでReduxのストアを作成する際に、applyMiddlewareでミドルウェアとして登録しておく必要があるんじゃなかったっけ。。。

Reduxでは基本的に、Action Creatorによって生成されたActionをStoreにディスパッチすることで単純な同期更新を行っています。そこにRedux-Thunkのようなミドルウェアを導入することでStoreの機能を拡張し、非同期ロジックを記述できるようにできます。
通常Action CreatorはActionオブジェクトを返しますが、Redux-Thunkを使用すると「Thunk」という関数を返すことができるようになります。これによってActionのディスパッチを遅らせたり、特定の条件が満たされた場合のみディスパッチできるようになります。
Redux-Thunkで非同期処理ができる仕組みを理解しよう
https://qiita.com/jima-r20/items/7fee2f00dbd1f302e373

仕組みはわかってないけど、大体あってた。
今はそれで良し。

typescript-fsa typescript-fsa-reducers

これはあれですよね。あれ。なんかreducerとか何かを書くのを、簡単にするんじゃなかったでしたっけ...?
→TypeScriptでアクションクリエーターとレデューサーが簡単に書けるようになるんでした。

参考
reduxをtypescriptで使うならこれを使うしかない。(typescript-fsaがすごい)
https://qiita.com/m0a/items/703d64c74e43cb392a64

redux-devtools

インストールしておきながら、まったく使っていませんでした。
今後使ってみたいです。

参考
Reduxのデバックに必須！Redux DevToolsの使い方
https://harkerhack.com/react-redux-devtools/

あとがき

一旦ここまでにします。
書こうと思って調べるほど、自分がよくわかってないことがわかりますね。
そのためにも、ゴミ記事でいいと思ってるんですが、それくらいだったら、ブログかなんかでやった方がいいのかな。