iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
0
Modern Web

Zero to hero with React.js系列 第 20

【Day20 React】Redux 入門

  • 分享至 

  • xImage
  •  

後面這二十天,將專攻 Redux,一樣也是透過做中學的方式來理解 Redux。
首先,官方文件是必備材料:
Redux 官方中文文件

另外,這一篇 Code Cartoons 寫得非常有趣且容易理解。


需要 Redux 的原因

當我們在開發大型專案時,程式碼會跟著快速膨脹,以一種猖狂的速度增加著⋯
這時我們的應用程式出現了以下問題:

  1. 越來越龐大且複雜的 UI
  2. 多個 component 同時傳遞 data
  3. 當 child 要更新 parent 不知道如何處置

這導致我們單純透過 React 來管理資料會變得非常棘手,無法有效地進行資料操作。

Redux 的特色

  1. Store 是 Redux 的核心,它是一個 data object。整個應用程式的 state 會被儲存在這個唯一的 store 裡面
  2. Reducer 定義如何更新 store 的方法,每一個 component 透過 Reducer 來更新 store 裡面的 data
  3. 透過 Action,component 可以觸發特定的 Reducer 運作,接著自動更新 store,而這些 action 會被存進名為 actionCreator() 的 function

透過 redux,任何子元件可以更新 store,資料的更新流程簡化許多。

今天就是大量閱讀 redux 相關文件,研讀其他前輩的筆記,今天文章短短的,因為後面很硬所以這篇先中場休息XDD(明明是偷懶?)


上一篇
【Day19 React】React router 在 Single Page Application(SPA) 的應用
下一篇
【Day 21 React】Redux 做遊戲角色陣容應用程式——趴萬
系列文
Zero to hero with React.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言