Redux入門學習紀錄
離上次5/5上React入門的今天去上了Redux入門，這次課程深度滿深的。在2016年某次程式聚會聽到有人分享一些Redux，但那時我的程式能力不能理解很多很可惜。
這次做個學習紀錄，以利追蹤自己之後的學習方向：
Redux參考Flux（拉丁文，等同英文的Flow）並改善它。這兩者都是單向資料流的架構。Redux改善Flux擁有很多store會難統一應用程式狀態的缺點，規定應用程式中只能有一個store，而這store是個樹狀結構。
簡單說，Redux = Flux + Elm (Elm使用純FP最後編譯成JS的程式語言，就像TypeScript)
其實Redux不一定要搭配React使用，它可以和純JS使用。但因React本身的state都是每個元件私有的，並未有應用程式層級（相當於全域）的state，所以利用Redux的store中的state能做到全域型的state，使每個元件間容易相互溝通。
因而實務上，React中可以完全不用寫state，全部交給Redux處理。
這次最令我印象深刻的一段：
- 動作能做成一種動作描述的物件（action object）因而含key(type)和value(payload)，顛覆過去我認為動作就像呼叫函式的感覺。
- action object最好透過action creator建立，方便管理且有異步東西可寫在action creator（可透過中間件達到pure function效果），然後透過dispatch統一發送。
- 老師以「發送火箭」比喻Redux的做法：payload代表火箭最頂端的太空艙，為有效資料 ；燃料部分為meta data，是為傳遞data的data；而火箭發射器就是dispatcher了。
Redux的3個基本原則：
1. single source of truth：就是只有一個store
2. state is read-only
3.changes are made with pure functions：
- FP中reduce運算定義： (previousState, action) => newState，用意在能對應到React。
- FP中的pure functions的合成樣式意思，e.g. f(g(h(x)))，函數執行順序：h -> g -> f，而這三個函數都要是pure function。
- pure function 有一些優點，其中我最印象深刻的是「可做cache或記憶處理，在高花費的複雜運算中可提高效能」。
pure function是為了防止函式產生副作用，以達到code易預測且封閉函式的作用域。而Redux中的不能寫到副作用，通常是指防止中度以上等級的副作用（如DB處理）。像console.log()這種隱性的副作用則可以寫。
Redux套⽤用七步驟：（此處七步驟直接copy from 老師的ppt）
1. 從redux模組中導入createStore與combineReducers函式
2. 針對狀狀態要如何處理理，撰寫純粹的reducer(歸納)函式，最
後⽤用combineReducers函式合併
3. 由合併好的reducer，建立出store
4. 撰寫⼀一個render(渲染)函式，在狀狀態有更更動時作重新渲染
5. 第⼀一次呼叫render函式，作⼀一開始的呈現
6. 訂閱render函式到store中(store.subscribe(render))
7. 觸發事件時要呼叫store.dispatch(action)
註: 這裡使⽤用combineReducers，只是要讓Redux dev tools可以正常看到store(state)的狀態變化
- 如果Redux和React搭配使用，則步驟4~6會不見：步驟4、步驟5會交給React做render，步驟6則交給一個React元件叫Provider。Provider一定包在應用程式的最外層，如此所有store才能穿透每個元件，也就是每個元件都可呼叫store.getState()取得目前state。
- Redux和React之間可分使用connect()的全綁定（指綁定所有action creator），或是實務中建議使用mapDispatchToProps()的部分綁定（指綁定該元件有需要用到的action creator）。
最後，一些補充：
- 高階元件樣式是指：export default xxx()，目的是為了強化原本元件樣式和結構。
- 複雜的狀態更動（用到很深層的狀態模型時）可搭配使用Immutable.js。
- 這次課程未能講解到「中間件」。
這次做個學習紀錄，以利追蹤自己之後的學習方向：
Redux參考Flux（拉丁文，等同英文的Flow）並改善它。這兩者都是單向資料流的架構。Redux改善Flux擁有很多store會難統一應用程式狀態的缺點，規定應用程式中只能有一個store，而這store是個樹狀結構。
簡單說，Redux = Flux + Elm (Elm使用純FP最後編譯成JS的程式語言，就像TypeScript)
其實Redux不一定要搭配React使用，它可以和純JS使用。但因React本身的state都是每個元件私有的，並未有應用程式層級（相當於全域）的state，所以利用Redux的store中的state能做到全域型的state，使每個元件間容易相互溝通。
因而實務上，React中可以完全不用寫state，全部交給Redux處理。
這次最令我印象深刻的一段：
- 動作能做成一種動作描述的物件（action object）因而含key(type)和value(payload)，顛覆過去我認為動作就像呼叫函式的感覺。
- action object最好透過action creator建立，方便管理且有異步東西可寫在action creator（可透過中間件達到pure function效果），然後透過dispatch統一發送。
- 老師以「發送火箭」比喻Redux的做法：payload代表火箭最頂端的太空艙，為有效資料 ；燃料部分為meta data，是為傳遞data的data；而火箭發射器就是dispatcher了。
Redux的3個基本原則：
1. single source of truth：就是只有一個store
2. state is read-only
3.changes are made with pure functions：
- FP中reduce運算定義： (previousState, action) => newState，用意在能對應到React。
- FP中的pure functions的合成樣式意思，e.g. f(g(h(x)))，函數執行順序：h -> g -> f，而這三個函數都要是pure function。
- pure function 有一些優點，其中我最印象深刻的是「可做cache或記憶處理，在高花費的複雜運算中可提高效能」。
pure function是為了防止函式產生副作用，以達到code易預測且封閉函式的作用域。而Redux中的不能寫到副作用，通常是指防止中度以上等級的副作用（如DB處理）。像console.log()這種隱性的副作用則可以寫。
Redux套⽤用七步驟：（此處七步驟直接copy from 老師的ppt）
1. 從redux模組中導入createStore與combineReducers函式
2. 針對狀狀態要如何處理理，撰寫純粹的reducer(歸納)函式，最
後⽤用combineReducers函式合併
3. 由合併好的reducer，建立出store
4. 撰寫⼀一個render(渲染)函式，在狀狀態有更更動時作重新渲染
5. 第⼀一次呼叫render函式，作⼀一開始的呈現
6. 訂閱render函式到store中(store.subscribe(render))
7. 觸發事件時要呼叫store.dispatch(action)
註: 這裡使⽤用combineReducers，只是要讓Redux dev tools可以正常看到store(state)的狀態變化
- 如果Redux和React搭配使用，則步驟4~6會不見：步驟4、步驟5會交給React做render，步驟6則交給一個React元件叫Provider。Provider一定包在應用程式的最外層，如此所有store才能穿透每個元件，也就是每個元件都可呼叫store.getState()取得目前state。
- Redux和React之間可分使用connect()的全綁定（指綁定所有action creator），或是實務中建議使用mapDispatchToProps()的部分綁定（指綁定該元件有需要用到的action creator）。
最後，一些補充：
- 高階元件樣式是指：export default xxx()，目的是為了強化原本元件樣式和結構。
- 複雜的狀態更動（用到很深層的狀態模型時）可搭配使用Immutable.js。
- 這次課程未能講解到「中間件」。
留言
張貼留言