這部分我之前也有想過,而我看大家說要拔 redux,最好奇的也是拔掉之後到底怎麼處理這個部分。

我認為差異最大的地方是在「測試」。在使用 redux 的時候,container 提供給 component 該有的 props 並串接 redux,而 component 只要使用就好,完全不用知道背後做了什麼事。

舉例來說,現在有個 SignInContainer 跟 SignInComponent,後者在元件裡面只要寫 this.props.signIn() 就知道會做登入,然後可以在 componentDidUpdate 裡面根據 isLoginSuccess 之類的 props 來判斷是否登入成功,接著顯示出狀態。

所以對於 SignInComponent 來說,你是很好做測試的,你可以對這個元件做測試卻完全不 call 任何 API,因為這一段本來就是切開的。

如果今天像這篇的範例一樣,只有一個 SignIn 的 component 並且把 API 的邏輯也放在裡面,我很好奇要怎麼樣對這個元件寫測試?能夠做到寫了測試卻不 call API 嗎?看起來似乎不太行,因為呼叫 API 這個動作已經跟元件本身緊緊的綁在一起了。這樣的話 component 跟 API 的相依性就太重。

我之前有試過直接把 API 放在 component 裡面,其實一開始也是覺得滿好用的,完全避免掉 redux 的繁瑣,但後來導入測試的時候就碰到問題了,每次 render component 都會去 call API…XD

這部分或許可以透過 mock 或是把 API 放在外層並且再建立一個 wrapper component 來解決,但後者的解法其實就跟 container 一樣了,差別只在於 redux 是統一處理,而這個做法是每個 container 都會呼叫自己的 API 以及管理狀態。

Written by

重度拖延症患者,興趣是光想不做,有很多想做的事,卻一件都沒有執行。無聊的時候喜歡寫文章,發現自己好像有把事情講得比其他人清楚的能力。相信分享與交流可以讓世界更美好。Medium 文章列表請參考:https://aszx87410.github.io/blog/medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store