ECommerce 素振り
素振りすんべ
https://www.youtube.com/watch?v=Fy9SdZLBTOo
Next.js + TypeScriptの参考やで
ステップ1: ログイン機能から作る
@openid/appauthでログイン機能から作ることにした。
ステップ2:
1. React Hooksの非同期処理
2. ロジックとViewを分けた
Presentational Component と Container Component
Presentational Component
Reactの流儀
1. デザインモックから始め、そのUIをコンポーネントの構造に分解して落とし込む
2. ロジックを除外した、静的に動作するバージョンを作成する
3. UIを表現するために最低限必要な状態を特定する
4. 3の状態をdおこに配置すべきか決める
5. 階層構造を遡って、データが上流から流れてくるようにする
table:design-pattern
Presentational Component Container Component
どのように見えるかに関心を持つ どのように機能するかに関心を持つ
内部にDOMマークアップをふんだんに持つ DOMマークアップを可能な限り持たない
FluxのStoreに依存しない Fluxのactionを実行したり、FluxのStoreに依存する
自身の状態を持たない(UIの状態は除く) データの状態をもつ
データの変更に介入しない データの変更に介入し、任意の処理を行う
関数コンポーネントで表現される Hooksが使われることが多い
Reduct グローバルステート
Redux の思想
・Single source of truth(信頼できる唯一の情報源)
・State is read-only(状態は読み取り専用)
・Changes are made with pure functions(変更は純粋関数にて行われる)
優先度 A: 必須
1. state を直接書き換えない
2. reducer に副作用を持たせない
3. シリアライズできない値を state や action に入れない
4. store はひとつのアプリにつきひとつだけ
React hools form
https://scrapbox.io/files/60b62057aafab8001d795a26.png
・Store ...... アプリケーション全体で参照したい状態データの保管庫
・Action ...... イベントにおける『何をどうしたいか』という意図を表現したもの
・Dispatcher ......actionの種類を判断して、それにひもづけられたstoreの更新処理を行うもの
・Reducer.... (prevState, action) => newState
Slice
action と reducer のロジックを統合したもののことを Redux Toolkit では『Slice』って呼ぶのね。
Redux Toolkit
おさらい!!
React Context