活版印字

Dan Abramov - Live React Hot Reloading 重點整理

Posted at 2016-03-15 redux 

Redux

• Atomic Flux with hot reloading
• Reducer + Flux

開場 (1:20)

講者說明他試著去解決他 workflow 遇到的麻煩，並鼓勵多花一點時間，了解你的開發工具，然後你才可以更專注於你的開發。

現狀的挫折 (3:00)

• 每次改變都需要更新
• 重複的 state
• 重複的 action

frustration: 挫折
status quo : the ​present ​situation

我們可以解決什麼？(3:30)

• 多數的變動都不劇烈
• Preserve the state
• 修復錯誤

drastic: 劇烈

支援 Hot loading 的 Tool (4:15)

• Amok
• Figwheel
• LiveReactLoad
• React Hot Loader
• Webpack

什麼是 Hot Reloading？ (4:45)

講者用了一個 Time Travel 的 Demo 做解說。

每次存檔的時候，都會更新這三個 (6:55)

1
2
3

Render
ComponentDidUpdate
handleClick

講者之前的 WorkFlow (9:45)

• React Hot loader
• Style Loader
• Webpack

React Hot Loader with Flux (10:15)

• Component
• Action Creators
• Stores

Demo Store 瘦身 (11:15)

on a diet: 瘦身

介紹 Reducer (16:11)

針對 Store 瘦身，而提出 Reducer 架構。

講者現在的 WorkFlow (26:20)

• Redux
• Redux DevTools
• React Hot Loader
• Webpack

demo redux native (26:45)

總結

Redux 主要提供了 Hot loading 跟 Store 架構的瘦身。