實作 Redux(六):總結、流程


Posted by YongChenSu on 2020-12-14

dispatch

提高修改數據的門檻,必須通 dispatch,也需要在 action 裡聲明。

createStore

可以產生 store,裡面包含 getStatedispatch 函數。

subscribe

每次都要重新渲染很麻煩,通過 store.subscribe 監聽數據修改事件,每次數據更新的時候自動渲染畫面。

reducer

  1. 為了避免效能問題,優化 stateChangerreducer
  2. 定義 reducer 只能是純函數。
  3. reducer 初始化 state
  4. 根據 state 以及 action,計算具有共享結構 (相同記憶體位置) 的state

總結:使用 createStore 流程

// 定義一個 reducer
funciton reducer (state, action) {
  // 初始化 state 和 switch case
}
// 產生 store
const store = createStore(reducer)
// 監聽數據變化重新渲染畫面
store.subscribe(() => renderApp(store.getState()))
// first render
renderApp(store.getState())
// dispatch 頁面自動更新
store.dispatch(...)

參考資源


#程式導師實驗計畫第四期 #前端 #React #react book #Redux







Related Posts

Day6 左邊,指令太少了!搞什麼東西!

Day6 左邊,指令太少了!搞什麼東西!

[心得] - Final Project 實作心得

[心得] - Final Project 實作心得

迴圈 for ..in

迴圈 for ..in


Comments