Refactoring React Component in Reactive Way – Michael Hsu – Medium

Refactoring React Component in Reactive Way  #react #reactiveprogramming #recompose #reactjs

  • 實作一第一版是 Imperative 的實作方式,主要的片段大概長這樣:const onClick = e = { if (this.state.status !
  • == ‘default’) return; this.props.onClick(e); this.setState({ status: ‘loading’ }); setTimeout(() = this.setState({ status: ‘success’ }), 400); setTimeout(() = this.setState({ status: ‘default’ }), Rx 的獨特之道,並透過觀察模式搭配非常 Powerful 的 Operators 可以使得你的思緒清晰,完全掌控資料如何流動讓人一試成癮。在 CopyButton status$,而上右圖轉換的過程就是不斷地善用 Operator 來改變資料流。*通常 Rx 在變數宣告會以錢字號 $ 結尾來代表 Stream 或是 Observable。測試下左圖為 switchMapTo 的 Marble Diagram,下右圖則為測試時以文字來表達Marble Diagram 的時間軸。其中- 表示 10 ms。大致上就是利用 Rx.TestScheduer 來進行測試,使用建立一個 hot Observable 模擬當滑鼠依序產生了 x、y 兩個點擊事件點時,我們的 status 會相對反應出 1 2 3 4 四種狀態的時間點。如此就能很清楚地了解資料在 Component Component 的 Input (props) 與 Output (dom)。*建議可以觀看蛋頭先生的 Introduction to RxJS Marble Testing 課程。Rx ProsSeparated Codes:Reactive status 的值到底會受到誰而改變;而 Rx 通常比較偏好使用 Declarative 的方法進行宣告 Unit Test 比較不同,Rx 還多了可以使用 Marble Testing 來進行視覺化的測試。Rx ConsRx 在 JS 現階段還非內建的,通常需要搭配 Library 來使用,如果沒做好 Optimize Bundle Size,會造成不少負擔。測試的用法在 Rx.js v5 文件尚不完整,似乎在做一些調整。套件選擇在 React 世界要使用 Reactive 的開發模式有兩種做法:State Management Level:推薦使用 Redux 搭配 Redux-cycles Middleware,把 State、Presentation Component 以及 Side-effects 拆開是比較理想的做法,Cycle.js 生態圈的在這方面做得比較完善。React Component Level:在某些情況,可能會想單純地使用 React State 來處理就好,例如本文的 CopyButton,這時候就推薦使用 Recompose 的 Observable Utilities,可以很友善的與 Rx 橋接。比起 Redux-cycles 已經把每一個 cycles 定義為一個個的 Pure Function,若想要在 Recompose 的 HOC 內撰寫測試,需要把 Observables Scheduler 抽出,這樣才能把異步的操作使用同步的方法進行測試:

Reactive 的思維雖然不會減少你的程式碼行數,但是可以幫你結構上做好關注點分離。在第一個版本的實作中很難追蹤 status 的值到底會受到誰而改變;而 Rx 通常比較偏好使用 Declarative 的方法進行宣告 status$,只要記得觀察「誰」會導致變化就好…

@ReactDOM: Refactoring React Component in Reactive Way #react #reactiveprogramming #recompose #reactjs

if (this.state.status !== ‘default’) return;

this.setState({ status: ‘loading’ });

setTimeout(() => this.setState({ status: ‘success’ }), 400);

setTimeout(() => this.setState({ status: ‘default’ }), 1800);

Refactoring React Component in Reactive Way – Michael Hsu – Medium