React Redux (with webpack,es6)開發需要注意的事情

這邊也是個人的一些備忘,
有些是收尾時遇到的問題,
有些是後來覺得可以再做改進的部分。

Smart & Dumb component的分別

gaearon (Dan Abramov)他的文章內有提到:
Dumb components:
Examples: Page, Sidebar, Story, UserInfo, List,諸如此類的都是dumb components.

  • Have no dependencies on the rest of the app, e.g. Flux actions or stores.
    不要依賴這個APP的actions or stores等部分,它必須要可以獨立運作
  • Often allow containment via this.props.children.
    可以允許有this.props.children,讓這個元件有修改的彈性。
  • Receive data and callbacks exclusively via props.
    接受資料的改變只能透過props來處理,不必也不能用state。
  • Have a CSS file associated with them.
    元件的外觀能夠用一個css來維護
    (這樣才有機會重用,但如果你是用bootstrap,material-ui之類的框架當然在最上層有引用到就好。)
  • Rarely have their own state.
    很少用到state,(有的話代表這個元件有自已的運作邏輯,但一般就是呈現動畫或是做簡單的檢核而已。)
  • Might use other dumb components.
    也許會用到其他的dumb components(我個人不太建議,除非你確定你只在這個專案使用)

smart components:
Examples: UserPage, FollowersSidebar, StoryContainer, FollowedUserList.

  • Wrap one or more dumb or smart components.
    一定包含一個以上的元件,這是當然的,因為它的責任就是處理元件間的聯絡關係。
  • Hold state from Flux stores and pass it as objects to dumb components.
    負責把從flux(or redux等)接收到的state傳給dumb component
  • Call Flux actions and provide these as callbacks to dumb components.
    負責call action,並把它的callback傳給dumb component
  • Never have their own CSS styles.
    它應該只有結構而沒有外觀
  • Rarely emit DOM of their own, use dumb components for layout.
    同上

Router的處理其實也可以用Redux-router

不過吼,有點風險是它現在更新的頻率有點低,而且嚴格的要求你更新state的action不能寫在constructor唷,可能會有些小地方要調整,不一定直接掛上去就萬事ok,所以還是自行考量。

踩到的雷:

1. 用material-ui(http://www.getmdl.io/)遇到的:

因為它在自已的dom render完之後還有自已綁定的事件,當你在抽換dom的時候這個事件不會重新綁件,那要怎麼辦呢?它提供了一個方法 window.componentHandler.upgradeAllRegistered();
這樣就會重新綁定了。

2.用npm package localstorage遇到的:

內含IE10之前不支援的語法(__defineGetter__),
所以在IE整個畫面會跑不出來
怎麼辦呢?最好的方式就是不要用。
不用怎麼辦呢?其實localstorage是新的browser內建原生的東西,不用就不用,自已寫就好了…
不過為了找到是哪個套件在IE上出問題我花了一下午的時間…
有善心人士可以告訴我在IE上de Webpack包出來的 bug 的好方法嗎?

================================
後面是工商服務一下
solda.io 手打拍賣 目前正由我用React+Redux改版中,
有任何bug或改進或疑問可以fb私訊我,謝謝。

Show your support

Clapping shows how much you appreciated Yi-Ju Wu’s story.