職場でReactを使ってフロントエンドを構築していますが、サービスの注文履歴画面にエラーが発生している模様。
まずQAリストを作成し、それに則ってエラーの解消をしていきたいところですが、
そもそもReact周りの知識がないことで、コードのどこの部分を検証すれば良いのかさえも分からなかったため、
一つ一つ理解していくための自分用メモです。
（上司によると、フロントではstoreやview周りをチェックする必要があるとのこと。）
Flux
Flux（フラックス）はFacebook社が提唱している、クライアントサイドのWebアプリケーション開発のためのアプリケーション・アーキテクチャ（設計思想）です。単方向のデータフローを構築できることが最大の特徴で、開発の規模が大きくなってもデータの流れを見失いづらいことが大きなメリットです。Reactとの併用を主に想定して生み出されたため、ReactによるWebアプリケーション開発を行う多くの現場で採用されています。
| 名前 | 役割 |
|---|---|
| Store（ストア） | アプリケーションの状態データを保持するオブジェクト、状態の更新を実施する処理 |
| Action（アクション） | 状態を更新するための指示内容を表すメッセージ |
| Dispatcher（ディスパッチャー） | Storeに対してActionによる更新指示を行う関数 |
Fluxの最大の特徴「単方向データフロー」
状態の更新指示内容である「Action」を関数「Dispatcher」で「Store」に伝えて状態を更新し、その結果を「View（React）」に伝える、といった流れです。
実際にアプリに組み込んだ場合には、ユーザーが画面を操作したイベントに応じて新たなActionを発行（dispatch）して、状態と画面を更新していく形になるので、次の通りになります。
上図に沿って初期化後の処理を一つひとつ見ていくと、次のことをしています。
1.ユーザーがViewを操作する（ボタンを押す、文字を入力する、など）
2.更新したい事柄をActionの形にまとめて、Dispatcherに渡す
3.DispatcherからActionを渡されたStoreが、Actionの内容に応じて状態を更新する
4.Storeの状態が更新されたことを検知したViewが書き換わる
Fluxアーキテクチャを採用したアプリは、このデータフローを繰り返していくことになります。データの流れを逆流させたり、Dispatcher以外の方法でStoreを更新したりすることはできないので、アプリの動きを把握しやすいです。Fluxが開発規模の拡大に強いとされる理由はここにあります。
▼こちらも参考になります。
Fluxとはなんなのか
Redux
Reduxは、Reactが扱うUIのstate(状態)を管理をするためのフレームワークのこと。
React以外にもAngularJSやjQueryなどと併せて使用することもできるが、Reactと使用するのが一番相性がいい。
React→stateの管理するデータフローにFluxを提案
Redux→Fluxの概念を拡張してより扱いやすく設計
▼こちらも参考になります。
[[フロントエンド] Reduxの考え方をシンプルに理解しよう（入門記事）]
(https://www.yoheim.net/blog.php?q=20191201)
FluxをReactとReduxを用いたショップアプリに落とし込んで考えてみる
Container
ショップ。接続されたコンポーネント。
Action
ショップスタッフ。例えば在庫が減ってきたら管理人に「在庫の補充をお願いします」と変更（Action）を依頼(Dispatch)する人。
Reducer
管理人、マネージャー。ショップスタッフ「Action」からの依頼を受けて、それを許可する人。
Store
全ての状態を一元管理する「倉庫」
管理人「Reducer」の指示によってStoreからまた新しい商品がショップに並べられる。
mapStateToProps、mapDispatchToProps
新しく発行された状態をコンテナに接続する関数
WebpackとSSRについて
こちらの記事を読みましたが、ザックリとしかまだ読めていません。
これで全体像はなんとなく分かった気がしますが、正直浅い理解です。。。
まずはとにかくまずはインプットしていかないないとと思い、
Udemyのこちらの教材が良いという情報があったため購入してみました。
英語ですが翻訳しながら理解していきたいと思います。
[Udemy:Modern React with Redux]
(https://www.udemy.com/course/react-redux/)
早くコードが書けるようになりたいです。